Vue-更新子组件而不更新父组件。最好的方法?

我是Vue的新手,我试图动态创建一个Div列表,每个列表具有X个子Div。此外,还会在各个位置添加,编辑或删除子级。

div的数据最初通过称为pageObjects的结构化数组到达:

var pageObjects = [
            {
                id : "1",
                title : "Page 1",
                subpages : [
                            {
                                  id: "2_1",
                               title: "Page 2 Subpage 1"
                            },
                            {
                                  id: "2_2",
                               title: "Page 2 Subpage 2"
                            }
                ]
            },
            {
                id : "2",
                title : "Page 2",
                subpages : [
                            {
                                id: "2_1",
                             title: "Page 2 Subpage 1"
                            },
                            {
                                id: "2_2",
                             title: "Page 2 Subpage 2"
                            }
                        ]

            }
];

我可以使用自定义vue组件轻松创建父级和子级div:

Vue.component('page-component', {
    template: `<div v-bind:id="'page' + page.id">This is a parent div with title {{page.title}} 
    <subpage-component v-for="subpage in page.subpages" v-bind:subpage="subpage" /></div>`,
    props: {
        page: Object
    }
});

Vue.component('subpage-component', {
     template: `<div v-bind:id="'subpage' + subpage.id">This is a sub page with title {{ subpage.title }}</div>`,
     props: {
         subpage: Object
     }
});

然后可以通过HTML创建所有父母和子女:

<page-component v-for="page in pageObjects" :page="page"/>

这可行-但是我不知道编辑子数据或动态添加新子级的最佳实践。我可以更改pageObject数组,该数组将更新所有当前内容,但是必须有一种更好的方法-为所有父级和div编辑整个数组,只是为了更改一个子div的一部分似乎是过多且效率低下的。另外,我不能仅通过从数组中删除子项来添加/删除子项。

为了独立编辑子div的内容,我尝试将每个子链接到新的Vue对象:

subpagescontainer1 = new Vue({
el: '#subpage1_1',
data: {
    title: "some title here"
},
methods:{
    updateSubPageHtml: function(_title){
        console.log(this);
        console.log("updating title to "+_title);
        this.title = _title;
    }
}
});

...但是我不能使用“ title”变量,因为当我在子页面组件的模板中添加{{title}}并运行它时,出现以下错误:

“ ReferenceError:标题未定义”。

有人可以建议一种更好的方式动态地向父母添加/编辑/删除孩子吗?

评论