假设有如下组件:
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 的理解存在偏差呢?谢谢!
1
Garwih 2018-12-22 01:18:16 +08:00 1
objectSample.a 是可以拿到值的。
而且,你 component 里面的 name 是哪个版本的用法?不会报错? |
2
rabbbit 2018-12-22 01:28:40 +08:00 1
|
3
Biwood 2018-12-22 01:41:24 +08:00 1
用 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 |
4
fourstring OP @Biwood 不好意思 示例代码随手写的😂😂😂
|