如何在 Vue.js 2.0 中從子元件更新父資料？

在Vue.js 中從子元件更新父資料

在Vue.js 2.0 中，傳統的雙向綁定已被替換為事件驅動的架構。這意味著子元件不應直接修改其 props。相反，它應該發出事件並允許父級回應這些事件。

要從子元件更新父級數據，您可以使用帶有 v-model 的自訂元件。這種特殊的語法為事件驅動方法提供了簡寫，可讓您將 prop 直接綁定到子元件中的值。它的運作原理如下：

1. 建立子元件：

Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

• value prop 是子元件的資料會顯示並修改。
• 當子元件中的輸入值改變時，會呼叫 updateValue 方法。它發出一個輸入事件，並將新值作為參數傳遞。

2. 建立父Vue 實例：

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

• parentValue 資料屬性將保存在父模板中顯示的值。

3. 在子組件中使用v-model:

<child v-model="parentValue"></child>

• 使用v-model 在parentValueValue和子元件中的prop值之間建立雙向綁定。

4. 處理父組件中的輸入事件：

當子組件中的輸入值發生變化時，updateValue方法會發出輸入事件。在父 Vue 實例中，您可以使用下列程式碼處理此事件：

handleInputEvent(value) {
  this.parentValue = value;
}

每當子元件中的輸入值發生變更時，這都會更新 ParentValue 資料屬性。

透過以下方式透過這種事件驅動的方法，您可以有效地從 Vue.js 2.0 中的子元件更新父數據，並保持乾淨且模組化的架構。

以上是如何在 Vue.js 2.0 中從子元件更新父資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！