Question

我有2个组件Parent和Child - 父母可以有很多孩子。我需要孩子们知道他们与兄弟姐妹的关系（index）。

的Javascript

Vue.component('Parent', {
    template: '<div><slot></slot></div>',
    mounted: function() {
        this.$children.forEach(function(child, index) {
            /* attempt one */
            child.$el.setAttribute('test-prop', index);

            /* attempt two */
            child.$props.testProp = index;
        })
    }
})

Vue.component('Child', {
    template: '<div><span>{{testProp}}</span><slot></slot></div>',
    props: ['testProp']
});

标记

<Parent>
    <Child>some complex html</Child>
    <Child>some complex html</Child>
    <Child>some complex html</Child>
    <Child>some complex html</Child>
</Parent>

尝试一个结果未定义但dom检查器显示该属性已应用

尝试两个会引发直接道具变异警告，但孩子似乎仍无法访问该索引。

索引仅在Parent被挂载时已知，因此我无法将道具直接应用于标记中的Child元素。

我无法在源HTML标记中加入<Child v-for="child in children"> in the家长template because家长requires to be used to retrieve the孩子。

解决这个问题的最佳方法是什么？

Answer 1

我找到的解决方案位于created组件的Parent函数中。循环浏览默认广告位并将索引传递到Child VNode componentOptions。

下面的代码假定模板中只存在子组件和空格，您可以对foreach中的每个slot添加其他检查，以确保它是正确的组件。

created: function() {
        var index = 0;
        this.$slots.default.forEach(function(slot) {
            if (slot.componentOptions !== undefined && slot.componentOptions.propsData !== undefined) {
                slot.componentOptions.propsData.testProp = index;
                index++;
            }
        })
    },

编辑：然而，这没有反应性 - 您可以使用此方法绑定数据。

VueJS将prop传递给子节点，而不在父模板中引用子节点

1 个答案: