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

通常在子组件内部更改道具是一种不好的做法。在这种情况下，您可以创建两个不同的变量，并在其中一些变量（通过事件和道具）更改其值时更新另一个变量。

因此，greeting组件会发出一些事件，您将在主要组件内部捕获该事件并更新主要组件的name

另一方面，主要组件会将一个道具传递给greeting，考虑到main内部的变化，该道具将是反应性的，并将在问候语数据中更新变量name。

如果您遇到更多类似情况，请考虑使用vuex

Answer 2

如果您将诸如对象之类的引用作为prop传递，则可以在父级和子级上绑定该对象的属性

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 3

我认为，您正在寻找的是Vue.js 2.3.0+中的.sync modifier for events。

您可以在我的文章here中找到相同的示例实现。

父子之间共享的v模型值

3 个答案: