Синхронизировать реквизит в Vuejs

1

Я пытаюсь синхронизировать опору между родителем и дочерним элементом в .

У меня есть родительский компонент, который включает дочерний компонент с поддержкой. Когда prop изменяется в родительском, prop обновляется в дочернем элементе, и когда prop изменяет в ребёнке, родитель обновляется.

Я начал с этого примера:

Html, где мой компонент установлен

<div>
   <div id="app">
   </div>
</div>

И родитель + ребенок:

Vue.component('myinput', {
   template: '<div><input v-model="mytext" /></div>',
   props: ['text'],

   data() {
      return {
         mytext: this.text
      }
   }
})

const vm = new Vue({
   el: '#app',
   template: '<div> <myinput :text="mytext"></myinput> <p> {{mytext}} </p></div>',

   data() {
      return {
         mytext: "Hello World!"
      }
   }
});

Поскольку я не могу мутировать реквизит, мне нужна локальная копия [Example Codepen].

Если я хочу, чтобы мой родительский компонент обновлялся, когда ребенок менялся, мне нужно, чтобы $emit значение.

Для этого я создал обертку вокруг mytext в дочернем компоненте:

computed: {
     wrapperMyText: {
       get() {
         return this.mytext;
       },
       set(v) {
         this.mytext = v;
         this.$emit('update:text', v);
       }
     }

Я использую wrapperMyText в модели. [Пример кодепа]

Теперь, если я хочу привязать другой путь (от родителя к ребенку), мне нужно добавить наблюдателя в дочерний элемент.

watch: {
     text(v) {
       this.mytext = v;
     }
   },

[Пример кодепа].

В этом примере есть только одна опора, мне нужно создать наблюдателя и вычисленное свойство. Если у меня есть 5 свойств, мне понадобятся 5 наблюдателей и 5 вычисленных свойств. Это означает, что код компонента загрязнен (слишком много кода) со всем этим. Поэтому мои вопросы:

Является ли это стандартным шаблоном для синхронизации опоры?
В этом случае лучше использовать Store (например, vuex)?
Почему так много кода необходимо сделать для простого случая?

После отражения кажется, что я пытаюсь переделать v-модель со свойствами.

Теги:
vuejs2

1 ответ

3
Лучший ответ

Одно вычисляемое свойство выполнит все, что вы пытаетесь сделать.

Vue.component('myinput', {
   template: '<div><input v-model="wrapperMyText"></div>',
   props: ['text'],
   computed: {
     wrapperMyText: {
       get() { return this.text;},
       set(v) { this.$emit('update:text', v);}
     }
   }
})

Вот ваша обновленная ручка.

Поэтому, чтобы ответить на ваши вопросы:

  1. Это стандартный шаблон.
  2. Если вы поместите состояние в Vuex, ваш компонент ввода больше не будет повторно использоваться.
  3. Вам не нужен весь этот код.
  • 0
    Именно то, что я искал, спасибо :)
  • 0
    Он задал тот же вопрос вчера, и я прокомментировал с скрипкой, потому что я не мог полностью понять вопрос. Он сказал, что решил это, поскольку проблема была чем-то другим. stackoverflow.com/q/45323183/7814783 ..... + 1 :)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню