V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
fourstring
V2EX  ›  Vue.js

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

  •  
  •   fourstring · 2018-12-22 00:59:11 +08:00 · 3999 次点击
    这是一个创建于 2155 天前的主题,其中的信息可能已经有所发展或是发生改变。

    假设有如下组件:

    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 条附言  ·  2018-12-22 08:57:35 +08:00
    感谢各位的回答,我发现是我在命名上出了问题,重复命名太多,语义不够明确,打扰了 QAQ
    4 条回复    2018-12-22 07:39:20 +08:00
    Garwih
        1
    Garwih  
       2018-12-22 01:18:16 +08:00   ❤️ 1
    objectSample.a 是可以拿到值的。
    而且,你 component 里面的 name 是哪个版本的用法?不会报错?
    rabbbit
        2
    rabbbit  
       2018-12-22 01:28:40 +08:00   ❤️ 1
    Biwood
        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
    fourstring
        4
    fourstring  
    OP
       2018-12-22 07:39:20 +08:00 via Android
    @Biwood 不好意思 示例代码随手写的😂😂😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5733 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 03:33 · PVG 11:33 · LAX 19:33 · JFK 22:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.