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

【问题标题】：Vue - updating child components without updating parent components. Best approach?Vue - 更新子组件而不更新父组件。最好的方法？
【发布时间】：2020-05-23 08:16:52
【问题描述】：

我是 Vue 的新手，我正在尝试动态创建一个 Div 列表，每个 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 和子 div：

//init the container
var pagescontainer = new Vue({
  el: '#pagescontainer',
  data: {
    pageObjects
  }
});

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 创建所有父母和孩子：

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

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

为了独立编辑子 div 的内容，我尝试将“数据”变量和方法直接添加到子页面组件：

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
  },
  data: {
    title: "some title here"
  },
  methods: {
    updateSubPageHtml: function (_title) {
      console.log(this);
      console.log("updating title to " + _title);
      this.title = _title;
    }
  }
});

但是当我运行它时，我收到以下错误：

ReferenceError: 标题未定义。

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

【问题讨论】：

标签： javascript vue.js vuejs2 parent-child

【解决方案1】：

首先data 应该始终是一个函数，它返回一个对象而不仅仅是一个对象。

您通常可以只替换整个 pageObjects 数组。 Vue 仍然会将生成的 html 与虚拟 DOM 进行比较，并且只更改实际需要的内容。您也可以使用您提供的 ID 直接更改页面和子页面。在全局范围内执行此操作，您可以使用 $emit 并更改父组件中的状态或将 Vuex 集成到您的项目中。

Vue 不会在编辑数组后重新渲染具有相同属性值的组件。

【讨论】：

谢谢。我想我需要研究一下 Vuex