Bagaimana untuk Mengemas kini Data Induk daripada Komponen Kanak-kanak dalam Vue.js Menggunakan v-model?

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

Dalam Vue.js, adalah penting untuk mengendalikan aliran data antara komponen induk dan anak dengan berkesan. Artikel ini membincangkan senario di mana anda ingin mengemas kini data induk daripada medan input dalam komponen anak.

Masalah:

Dalam Vue.js 2.0 dan ke atas, pengikatan dua hala telah ditamatkan. Apabila menggunakan prop untuk menghantar data daripada ibu bapa kepada anak, mutasi prop langsung tidak digalakkan kerana ia boleh membawa kepada amaran konsol.

Penyelesaian:

Untuk mengemas kini ibu bapa data, anda boleh menggunakan seni bina dipacu peristiwa dan komponen tersuai dengan model v. Model V menyediakan sintaks untuk pengikatan dua hala yang menggunakan peristiwa untuk berkomunikasi antara ibu bapa dan anak.

Pelaksanaan:

Buat komponen anak dengan templat yang termasuk medan input:

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

Dalam skrip komponen anak, tambah prop 'nilai' dan kaedah 'updateValue' yang mengeluarkan peristiwa 'input' dengan nilai yang dikemas kini:

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

  props: ['value'],

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

Dalam paparan induk, buat contoh Vue dengan data induk dan gunakan komponen anak dengan model v:

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

Apabila nilai medan input dalam komponen anak berubah, 'updateValue' kaedah dipanggil dan nilai yang dikemas kini dipancarkan sebagai acara 'input'. Instance Vue induk menerima acara yang dipancarkan dan mengemas kini 'parentValue'nya dengan sewajarnya.

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