Question

我想将一些属性从父级传递给他的所有孩子，当它们被转换时（内容分发语法）。在这种情况下，父母不知道（据我所知）他的孩子，所以我不知道如何继续。

更具体地说，我想要一种方法来写这个：

<my-parent prop1="foo" prop2="bar">
    <my-children></my-children> <!-- Must know content of prop1 and prop2 -->
    <my-children></my-children> <!-- Must know content of prop1 and prop2 -->
</my-parent>

而不是写这个：

<my-parent prop1="foo" prop2="bar">
    <my-children prop1="foo" prop2="bar"></my-children>
    <my-children prop1="foo" prop2="bar"></my-children>
</my-parent>

有可能吗？感谢。

Answer 1

此时（我不是vue专家）我可以在这个解决方案中思考。

分配每个组件的道具很无聊我同意，那么为什么不以编程方式进行呢？

// Create a global mixin
Vue.mixin({
  mounted() { // each component will execute this function after mounted
    if (!this.$children) {
      return;
    }

    for (const child of this.$children) { // iterate each child component
      if (child.$options._propKeys) {
        for (const propKey of child.$options._propKeys) { // iterate each child's props
          // if current component has a property named equal to child prop key
          if (Object.prototype.hasOwnProperty.call(this, propKey)) {
            // update child prop value
            this.$set(child, propKey, this[propKey]);

            // create a watch to update value again every time that parent property changes
            this.$watch(propKey, (newValue) => {
              this.$set(child, propKey, newValue);
            });
          }
        }
      }
    }
  },
});

这有效，但你会得到一个丑陋的vue警告信息：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

我不确定这是否是一个很好的解决方案但它有效，所以如果您决定使用，请记住Global-Mixin推荐：

稀疏小心地使用全局mixins，因为它会影响每一个创建单个Vue实例，包括第三方组件。

请参阅https://github.com/aldoromo88/PropsConvention

上的完整示例

希望有所帮助

Answer 2

这是我的解决方案，这可能不是很多，但这是我现在想要做的最干净的解决方案。原则是创建计算属性，如果它们存在则使用自己的组件prop，否则获取$ parent值。然后可以在this._prop。

中访问真正的道具

Vue.component('my-children', {
    props: ["prop1", "prop2"],
    template: "<div>{{_prop1}} - {{_prop2}}</div>",
    computed: {
        _prop1: function() {
            return this.prop1 || this.$parent.prop1;
        },
        _prop2: function() {
            return this.prop2 || this.$parent.prop2;
        }
    }
});

这是一个mixin生成器，它以更优雅的方式实现，并且可能有多个级别：

function passDown(...passDownProperties) {
    const computed = {};
    passDownProperties.forEach((prop) => {
        computed["_" + prop] = function() {
            return this[prop] || this.$parent[prop] || this.$parent["_" + prop];
        };
    });
    return { computed };
}

Vue.component('my-children', {
    props: ["prop1", "prop2"],
    template: "<div>{{_prop1}} - {{_prop2}}</div>",
    mixins: [passDown("prop1", "prop2")]
});

Answer 3

道具允许数据流仅一个级别。如果要保持数据永久化，可以使用事件总线。

在主文件中实例化一个空Vue实例的事件总线。

var bus = new Vue();

然后在您的父级中，使用要传递的数据发出事件

 bus.$emit('myEvent', dataToBePassed);

在您想要获取数据的任何地方聆听myEvent。在您的情况下，它在您的子组件中完成

bus.$on('myEvent', function(data) {
     .....
});

将属性从父组件传递到Vue中的所有已转换子组件

3 个答案: