Vue.js 中如何在父元件和子元件之間通訊資料更新？

在Vue.js 中通信父子數據更新

當你深入Vue.js 的世界時，你會遇到一些情況您需要將資料從子元件更新到其父元件。雖然雙向綁定在 Vue 1.x 中很流行，但在 Vue 2.x 中已被棄用，取而代之的是事件驅動方法。

要在 Vue 2.0 中處理父級和子級之間的資料更新，您需要可以利用 v-model 的自訂元件。 V-model 是一種特殊的語法，為 Vue 所採用的事件驅動架構提供了便利的捷徑。

考慮以下範例：

<code class="js">Vue.component('child', {
  template: '#child',
  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>

在此範例中：

• 子元件有一個名為value 的prop，它透過v- model 與父元件中的data 屬性同步。
• 當使用者在子組件的輸入欄位中鍵入時， updateValue 方法被觸發。
• updateValue 方法向父元件發出輸入事件，其中包含更新後的值。
• 父元件接收輸入事件並相應地更新自己的parentValue 資料屬性。

使用這種基於事件的方法，您可以有效地管理父子資料更新，同時保持解耦和模組化的元件架構。

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