Vue - обновление дочерних компонентов без обновления родительских компонентов. Лучший подход? - PullRequest
Новая
       6

Vue - обновление дочерних компонентов без обновления родительских компонентов. Лучший подход?

0 голосов
/ 07 февраля 2020

Я новичок в 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 компонентов: 

//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, я попытался добавить переменные и методы «data» непосредственно в компонент подстраницы: 

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: заголовок не определен.

Может кто-нибудь предложить лучший способ добавить / редактировать / удалять детей до родителей динамически?

1 Ответ

1 голос
/ 07 февраля 2020

Прежде всего data всегда должна быть функцией, которая возвращает объект, а не только объект.

Обычно вы можете просто заменить весь массив pageObjects. Vue все равно будет сравнивать полученный html с виртуальным DOM и изменять только те вещи, которые действительно необходимы. Также вы можете изменять страницы и подстраницы напрямую, используя идентификаторы, которые вы им дали. Делая это глобально, вы можете использовать $emit и изменять состояние в родительском компоненте или интегрировать Vuex в ваш проект.

Vue не будет повторно отображать компоненты, имеющие одинаковые значения пропелла, после редактирования массива.

...