Совместное значение V-модели между дочерним и родительским

Question

У меня есть компонент, который разделяет v-model так же, как родительский компонент.Код как ниже:

Vue.component('greeting', {
  template: '<input type="text" :name="name" v-on:input="updateSearch($event.target.value)"> ' ,
  props: ['name'],
  methods: {
    updateSearch: function(value) {
      this.$emit('input', value);
    }
  }
});


const app = new Vue({
  el: '#app',
  data: {
    name: ''
  }
});

<script src="https://unpkg.com/vue@2.6.9/dist/vue.js"></script>
<div id="app">
  
  Child: <greeting v-model="name"></greeting>
  <br><br><br>
  Main: <input type="text" v-model="name" placeholder="" />

</div>

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

Answer 1

Если вы передадите ссылку, подобную объекту, в качестве реквизита, вы можете связать свойство этого объекта как с родительским, так и с дочерним элементами

Vue.component('greeting', {
  template: '<input type="text" v-model="name.value" />' ,
  props: ['name']
});


const app = new Vue({
  el: '#app',
  data: {
    name: { value: '' }
  }
});

<script src="https://unpkg.com/vue@2.6.9/dist/vue.js"></script>
<div id="app">
  
  Child: <greeting v-bind:name="name"></greeting>
  <br><br><br>
  Main: <input type="text" v-model="name.value" placeholder="" />

</div>

Answer 2

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

Таким образом, greeting компонент будет $ emit какое-то событие, которое вы поймаетевнутри основного компонента и обновите main * name

С другой стороны, главный компонент будет передавать реквизит greeting, который будет реагировать с учетом изменений внутри main и будет обновлять переменную name в данных приветствия.

Если вы получаете больше подобных случаев, подумайте об использовании vuex

Answer 3

Я думаю, вы ищете модификатор .sync для событий в Vue.js 2.3.0+.

Пример этой же реализации вы можете найти в моей статье здесь .