如何使用 v-model 从 Vue.js 中的子组件更新父数据？

在 Vue.js 中从子组件更新父数据

在 Vue.js 中，处理父子组件之间的数据流非常重要有效地。本文讨论了一个场景，您希望从子组件中的输入字段更新父组件的数据。

问题：

在 Vue.js 2.0 及更高版本中，双向绑定已被弃用。当使用 props 将数据从父级传递给子级时，不鼓励直接进行 prop 突变，因为它可能会导致控制台警告。

解决方案：

更新父级的数据，您可以将事件驱动架构和自定义组件与 v-model 结合使用。 V-model 提供了双向绑定的语法，使用事件在父组件和子组件之间进行通信。

实现：

使用以下模板创建子组件：包含输入字段：

<code class="html"><template id="child">
  <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template></code>

在子组件的脚本中，添加一个 'value' 属性和一个 'updateValue' 方法，该方法会发出带有更新值的 'input' 事件：

<code class="javascript">Vue.component('child', {
  template: '#child',

  props: ['value'],

  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});</code>

在父视图中，使用父数据创建一个 Vue 实例，并将子组件与 v-model 一起使用：

<code class="html"><div id="app">
  <p>Parent value: {{ parentValue }}</p>
  <child v-model="parentValue"></child>
</div></code>

当子组件中的输入字段值发生变化时，'updateValue'方法被调用，更新的值作为“输入”事件发出。父 Vue 实例接收发出的事件并相应地更新其“parentValue”。

以上是如何使用 v-model 从 Vue.js 中的子组件更新父数据？的详细内容。更多信息请关注PHP中文网其他相关文章！