如何在 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 綁定

使用v-model 綁定

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

使用v-model 綁定

使用v-model 綁定使用v-model 綁定使用v-model 綁定使用v-model 結合>Vue.js 為雙向綁定提供了一種方便的簡寫方式，稱為v-model。在表單元素上使用 v-model 會自動將其綁定到父元件中的指定屬性。下面的程式碼示範了這一點：在此範例中，子元件的 value 屬性會綁定到父元件中的parentValue 屬性。子組件中輸入的變更將自動更新父組件中的parentValue。

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