如何使用 v-model 從 Vue.js 中的子元件更新父資料？

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

在Vue.js 中，處理父子元件之間的資料流非常重要有效地。本文討論了一個場景，您希望從子元件中的輸入欄位更新父元件的資料。

問題：

在 Vue.js 2.0 及更高版本中，雙向綁定已被棄用。當使用 props 將資料從父級傳遞給子級時，不鼓勵直接進行 prop 突變，因為它可能會導致控制台警告。

解決方案：

更新父級的數據，您可以將事件驅動架構和自訂元件與 v-model 結合使用。 V-model 提供了雙向綁定的語法，使用事件在父元件和子元件之間進行通訊。

實作：

使用下列範本建立子元件：包含輸入欄位：

<code class="html"><template id="child">
  <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template></code>

在子元件的腳本中，加入一個' value' 屬性和一個'updateValue' 方法，該方法會發出帶有更新值的'input' 事件：

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

  props: ['value'],

  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});</code>

在父視圖中，使用父資料建立一個Vue 實例，並將子組件與v-model 一起使用：

<code class="html"><div id="app">
  <p>Parent value: {{ parentValue }}</p>
  <child v-model="parentValue"></child>
</div></code>

當子組件中的輸入字段值發生變化時，'updateValue'方法被調用，更新的值作為“輸入”事件發出。父 Vue 實例接收發出的事件並相應地更新其「parentValue」。

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