Bagaimana untuk Mengemas kini Data Induk daripada Komponen Anak dalam Vue.js?

Mengemas kini Data Induk daripada Komponen Kanak-kanak dalam Vue.js

Dalam Vue.js, pengikatan dua hala membenarkan komponen anak memutasi secara langsung sifat komponen induknya. Walau bagaimanapun, dengan keluaran Vue 2.0, pengikatan dua hala telah ditamatkan dan memihak kepada seni bina dipacu peristiwa.

Penyelesaian: Komunikasi Didorong Peristiwa

Dalam pendekatan ini, komponen kanak-kanak menimbulkan peristiwa dengan nilai yang dikemas kini. Komponen induk pula, mengendalikan acara ini dan mengubah suai datanya dengan sewajarnya. Sebagai contoh, mari kita cipta komponen anak tersuai dengan input teks:

<code class="javascript">Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue(value) {
      this.$emit('input', value);
    }
  }
});</code>

Mengemas kini Nilai Induk

Dalam komponen anak, kaedah updateValue dipanggil setiap kali nilai input berubah. Kaedah ini mengeluarkan peristiwa 'input', menghantar nilai yang dikemas kini sebagai hujah.

Mendengarkan Peristiwa dalam Induk

Dalam contoh Vue induk:

<code class="javascript">new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  },
  methods: {
    handleInput(value) {
      this.parentValue = value;
    }
  }
});</code>

Mengikat dengan v-model

Vue.js menyediakan trengkas yang mudah untuk pengikatan dua hala yang dipanggil v-model. Menggunakan v-model pada elemen bentuk secara automatik mengikatnya pada sifat yang ditentukan dalam komponen induk. Kod di bawah menunjukkan ini:

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

Dalam contoh ini, sifat nilai komponen anak terikat kepada sifat parentValue dalam komponen induk. Perubahan pada input dalam komponen anak akan secara automatik mengemas kini parentValue dalam komponen induk.

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Data Induk daripada Komponen Anak dalam Vue.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!