Vue.js 中如何在父组件和子组件之间通信数据更新？

在 Vue.js 中通信父子数据更新

当你深入 Vue.js 的世界时，你会遇到一些情况您需要将数据从子组件更新到其父组件。虽然双向绑定在 Vue 1.x 中很流行，但在 Vue 2.x 中已被弃用，取而代之的是事件驱动方法。

要在 Vue 2.0 中处理父级和子级之间的数据更新，您需要可以利用 v-model 的自定义组件。 V-model 是一种特殊的语法，为 Vue 采用的事件驱动架构提供了便捷的快捷方式。

考虑以下示例：

<code class="js">Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  }
});</code>

<code class="html"><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

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

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

在此示例中：

• 子组件有一个名为 value 的 prop，它通过 v-model 与父组件中的 data 属性同步。
• 当用户在子组件的输入字段中键入时， updateValue 方法被触发。
• updateValue 方法向父组件发出一个输入事件，其中包含更新后的值。
• 父组件接收输入事件并相应地更新自己的parentValue 数据属性。

使用这种基于事件的方法，您可以有效地管理父子数据更新，同时保持解耦和模块化的组件架构。

以上是Vue.js 中如何在父组件和子组件之间通信数据更新？的详细内容。更多信息请关注PHP中文网其他相关文章！