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

Kemas kini Data Induk daripada Komponen Anak dalam Vue.js

Dalam Vue.js 2.0, pengikatan dua hala tradisional telah digantikan dengan seni bina yang didorong oleh peristiwa. Ini bermakna komponen kanak-kanak tidak boleh mengubah suai propnya secara langsung. Sebaliknya, ia sepatutnya memancarkan peristiwa dan membenarkan ibu bapa bertindak balas kepada peristiwa tersebut.

Untuk mengemas kini data induk daripada komponen anak, anda boleh menggunakan komponen tersuai dengan model v. Sintaks khas ini menyediakan singkatan untuk pendekatan dipacu peristiwa, membolehkan anda mengikat prop terus kepada nilai dalam komponen anak. Begini caranya:

1. Buat Komponen Kanak-kanak:

Vue.component('child', {
  template: '#child',
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

• Produk nilai ialah data yang komponen anak akan memaparkan dan mengubah suai.
• Kaedah updateValue dipanggil apabila nilai input dalam komponen anak berubah. Ia mengeluarkan peristiwa input, menghantar nilai baharu sebagai hujah.

2. Buat Instance Vue Induk:

new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  }
});

• Harta data parentValue akan memegang nilai yang akan dipaparkan dalam templat induk.

3. Gunakan v-model dalam Komponen Kanak-kanak:

<child v-model="parentValue"></child>

• Menggunakan v-model mewujudkan pengikatan dua hala antara sifat data parentValue dan nilai prop dalam komponen anak.

4. Kendalikan Peristiwa Input dalam Induk:

Apabila nilai input berubah dalam komponen anak, kaedah UpdateValue akan mengeluarkan peristiwa input. Dalam contoh Vue induk, anda boleh mengendalikan acara ini menggunakan kod berikut:

handleInputEvent(value) {
  this.parentValue = value;
}

Ini akan mengemas kini sifat data parentValue apabila nilai input dalam komponen anak berubah.

Dengan mengikuti pendekatan dipacu peristiwa ini, anda boleh mengemas kini data induk secara berkesan daripada komponen anak dalam Vue.js 2.0 dan mengekalkan seni bina yang bersih dan modular.

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