关于 Vue 中向一个组件的一个 prop 传递对象的问题

[fourstring]

假设有如下组件:

Vue.component({
    name:'test',
    props:['objectSample']
});

当这样向组件传递数据时：

<test :objectSample="myObject"/>

这时使用 Vue devtools 可以看到，假如传入对象 myObject 中有一个属性 a，那么在组件模板中想插入 a 的值时必须使用{{objectSample.myObject.a}}才行。

问题在于，为什么不能直接使用{{objectSample.a}}来访问传入这个 prop 中的对象的属性呢？ prop 的实现机制不是把传入的对象赋给 objectSample 这个对象吗？

我觉得这个问题值得讨论的原因是，{{objectSample.myObject.a}}这样的用法让组件和组件的使用方式之间产生了强耦合。假如给 objectSample 这个 prop 传入一个名为anotherObject的对象，即使它也有一个 a 属性，在模板中使用这个属性值也必须修改模板。这很可能会带来额外的命名以及文档方面的工作。

请问如何看待这种耦合用法？还是说我对 prop 的理解存在偏差呢？谢谢！

[Garwih]

objectSample.a 是可以拿到值的。
而且，你 component 里面的 name 是哪个版本的用法？不会报错？

[rabbbit]

[Biwood]

用 objectSample 这种驼峰命名 props 时，注意大小写敏感，在模板中应该写作 :object-sample="myObject"。

官方文档： https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-camelCase-vs-kebab-case

[fourstring]

@Biwood 不好意思 示例代码随手写的😂😂😂