javascript - 子级和父级之间共享 v-model 值

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

如果您传入像对象这样的引用作为 prop，则可以在父级和子级上绑定(bind)该对象的属性

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>