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

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

在 Vue.js 中，双向绑定允许子组件直接改变其父组件的属性。然而，随着 Vue 2.0 的发布，双向绑定已被弃用，取而代之的是事件驱动架构。

解决方案：事件驱动通信

In通过这种方法，子组件会引发具有更新值的事件。父组件依次处理这些事件并相应地修改其数据。例如，让我们创建一个带有文本输入的自定义子组件：

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

更新父值

在子组件中，每当输入值发生变化。此方法发出一个“输入”事件，并将更新后的值作为参数传递。

监听父级中的事件

在父 Vue 实例中：

<code class="javascript">new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  },
  methods: {
    handleInput(value) {
      this.parentValue = value;
    }
  }
});</code>

使用 v-model 绑定

Vue.js 为双向绑定提供了一种方便的简写方式，称为 v-model。在表单元素上使用 v-model 会自动将其绑定到父组件中的指定属性。下面的代码演示了这一点：

<code class="html"><child v-model="parentValue"></child></code>

在此示例中，子组件的 value 属性绑定到父组件中的parentValue 属性。子组件中输入的更改将自动更新父组件中的parentValue。

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