Bagaimanakah Saya Boleh Menyampaikan Kemas Kini Data Antara Komponen Ibu Bapa dan Anak dalam Vue.js?

Berkomunikasi Kemas Kini Data Ibu Bapa-Anak dalam Vue.js

Semasa anda mendalami dunia Vue.js, anda akan menghadapi situasi di mana anda perlu mengemas kini data daripada komponen anak kepada induknya. Walaupun pengikatan dua hala berleluasa dalam Vue 1.x, ia telah ditamatkan dan memihak kepada pendekatan terdorong peristiwa dalam Vue 2.x.

Untuk mengendalikan kemas kini data antara ibu bapa dan anak dalam Vue 2.0, anda boleh memanfaatkan komponen tersuai dengan model v. Model V ialah sintaks khas yang menyediakan pintasan yang mudah untuk seni bina dipacu peristiwa yang diguna pakai oleh Vue.

Pertimbangkan contoh berikut:

<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>

Dalam contoh ini:

• Komponen anak mempunyai nilai bernama prop yang disegerakkan dengan sifat data dalam induk melalui model v.
• Apabila pengguna menaip dalam medan input komponen anak, kaedah updateValue dicetuskan.
• Kaedah updateValue mengeluarkan peristiwa input kepada komponen induk dengan nilai yang dikemas kini.
• Komponen induk menerima peristiwa input dan mengemas kini sifat data parentValuenya sendiri dengan sewajarnya.

Menggunakan pendekatan berasaskan acara ini, anda boleh mengurus kemas kini data ibu bapa-anak dengan berkesan sambil mengekalkan seni bina komponen yang dipisahkan dan modular.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyampaikan Kemas Kini Data Antara Komponen Ibu Bapa dan Anak dalam Vue.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!