Question

有没有办法隐式地将数据传递给父级的所有子组件？我在React中寻找类似于context的东西。这是我尝试完成的一个简单示例：

<body>
    <my-component :my-prop="foo"></my-component>
    <my-component :my-prop="bar"></my-component>
</body>

-

import MyComponent from './my-component';

new Vue({
    el: 'body',
    components: {
        MyComponent,
    },
});

我希望所有my-component个孩子都可以访问myProp而无需每次都将其传下来。 $root听起来像是一个好主意，但是我必须为我页面上的每个组件新建一个vm，这也不会让人觉得好。

Answer 1

从子组件中，您可以获得像

这样的父组件属性

此。$ parent.myProp

https://vuejs.org/guide/components.html#Parent-Chain

编辑：创建在父母中查找属性的函数：

getProperty: function(vueComp, propName) {
    var p = vueComp.$parent;
    while (p) {
        if(p.hasOwnProperty(propName)){
        return p[propName];
        }
      p = p.$parent;
    }

    return null;
}

使用它：var x = getProperty("myProp");

如何隐式地将数据传递给Vue中的所有子组件？

1 个答案: