Javascript vuejs组件中支柱的深层反应性

我正在尝试构建一个简单的页面生成器，其中包含行元素、子列元素和最后一个我需要调用的组件。为此，我设计了一个新的体系结构，将数据集定义到根组件，并通过props将数据推送到其子元素。假设我有一个根组件：

<template>
    <div>
        <button @click.prevent="addRowField"></button>
        <row-element v-if="elements.length" v-for="(row, index) in elements" :key="'row_index_'+index" :attrs="row.attrs" :child_components="row.child_components" :row_index="index"></row-element>
    </div>
</template>

<script>
    import RowElement from "../../Components/Builder/RowElement";

    export default {
        name: "edit",
        data(){
            return{
                elements: [],
            }
        },
        created() {
            this.listenToEvents();
        },
        components: {
            RowElement,
        },
        methods:{
            addRowField() {
                const row_element = {
                    component: 'row',
                    attrs: {},
                    child_components: [

                    ]
                }
                this.elements.push(row_element)
            }
        },
    }
</script>

所以现在我必须在根页面上监听事件，所以我有：

eventBus.$on('add-columns', (data) => {
    if(typeof this.elements[data.index] !== 'undefined')
        this.elements[data.index].child_components.push(data.column)
});

现在我需要这些数据再次访问

ColumnComponent

，因此在ColumnComponent文件中我有：

<template>
    //some extra div to have extended features
    <builder-element
        v-if="!loading"
        v-for="(item, index) in child_components"
        :key="'element_index_'+index" :column_index="column_index"
        :element_index="index" class="border bg-white"
        :element="item" :row_index="row_index"
    >
    </builder-element>
</template>

<script>
    export default {
        name: "ColumnElement",
        props: {
            attrs: Object,
            child_components: Array,
            row_index: Number,
            column_index: Number
        },
    }
</script>

如您所见，我再次发出名为

addcomponent

的事件，该事件在根组件中再次被侦听，因此这是由以下侦听器生成的：

eventBus.$on('add-component', (data) => {
    this.elements[data.row_index].child_components[data.column_index].child_components[data.element_index] = data.component
});

它显示my

vue devtools

中的数据集，但它不显示在生成器元素中：

图像FYR:

这是我的根组件：

<template>
    <div>
        <button @click.prevent="addRowField"></button>
        <row-element v-if="elements.length" v-for="(row, index) in elements" :key="'row_index_'+index" :attrs="row.attrs" :child_components="row.child_components" :row_index="index"></row-element>
    </div>
</template>

<script>
    import RowElement from "../../Components/Builder/RowElement";

    export default {
        name: "edit",
        data(){
            return{
                elements: [],
            }
        },
        created() {
            this.listenToEvents();
        },
        components: {
            RowElement,
        },
        methods:{
            addRowField() {
                const row_element = {
                    component: 'row',
                    attrs: {},
                    child_components: [

                    ]
                }
                this.elements.push(row_element)
            }
        },
    }
</script>

这是我的RowComponent：

这是我的专栏组件：

这是我的生成器元素：

我不知道为什么这些数据没有传递给它的子组件，我的意思是最后一个组件对道具没有反应，任何更好的想法都是值得赞赏的

---

谢谢

问题在于您在

addComponent

方法中设置数据的方式

当您通过直接修改数组的索引（如

arr[0] = 10

根据他们的基因突变阵列中的定义

Vue包装了观察到的阵列的突变方法，因此它们也 触发视图更新。包装方法包括：

推

流行音乐（）

移位（）

取消移位（）

拼接（）

排序（）

反向

所以你可以改变

this.elements[data.row_index].child_components[data.column_index].child_components[data.element_index] = data.component

对,

---

复制此问题需要一段时间，但您是否尝试过使用

this.$set

？@pai.not.pi设置动态属性？您有任何示例吗？在fiddle/jsbin中？

this.elements[data.row_index].child_components[data.column_index].child_components[data.element_index] = data.component

this.elements[data.row_index].child_components[data.column_index].child_components.splice(data.element_index, 1, data.component);