如何在 Vue.js 中使用事件驱动架构更新父数据？

在 Vue.js 中使用事件驱动架构更新父数据

在 Vue.js 中，双向绑定不再可用2.0 版由于已弃用。相反，采用了一种更加事件驱动的架构，其中子组件不应该直接操作它们的 props。相反，它们应该使用事件发射来与其父组件进行通信。

如果您希望从子组件更新父数据，请考虑使用带有 v-model 的自定义组件。这种特殊语法提供了与双向绑定的近似值，但使用事件来实现。

这是一个简单的示例：

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

  // The child has a prop named 'value'. v-model will automatically bind to this prop.
  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>

在此示例中：

• 子组件有一个 v-model 指令绑定到父组件的parentValue 数据属性。
• 当用户在子组件的输入字段中输入值时，updateValue 方法是触发。
• 此方法会发出一个以值作为参数的输入事件，该事件由父组件处理。
• 父组件根据发出的值更新其parentValue 数据属性。子组件。

以上是如何在 Vue.js 中使用事件驱动架构更新父数据？的详细内容。更多信息请关注PHP中文网其他相关文章！