如何在 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中文網其他相關文章！