Bagaimana untuk Mengemas kini Data Induk dengan Seni Bina Didorong Peristiwa dalam Vue.js?

Mengemas kini Data Induk dengan Seni Bina Didorong Peristiwa dalam Vue.js

Dalam Vue.js, pengikatan dua hala tidak lagi tersedia dalam versi 2.0 kerana penamatannya. Sebaliknya, seni bina yang lebih dipacu acara digunakan, di mana komponen kanak-kanak tidak seharusnya memanipulasi prop mereka secara langsung. Sebaliknya, mereka harus menggunakan pemancar peristiwa untuk berkomunikasi dengan komponen induk mereka.

Jika anda ingin mengemas kini data induk daripada komponen anak, pertimbangkan untuk menggunakan komponen tersuai dengan model v. Sintaks khas ini memberikan penghampiran yang hampir kepada pengikatan dua hala, tetapi dilaksanakan menggunakan peristiwa.

Berikut ialah contoh mudah:

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

  // The child has a prop named 'value'. v-model will automatically bind to this prop.
  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 arahan model v yang terikat pada sifat data parentValue komponen induk.
• Apabila pengguna memasukkan nilai ke dalam medan input dalam komponen anak, kaedah updateValue ialah dicetuskan.
• Kaedah ini mengeluarkan peristiwa input dengan nilai sebagai parameter, yang dikendalikan oleh komponen induk.
• Komponen induk mengemas kini sifat data parentValuenya berdasarkan nilai yang dipancarkan oleh komponen kanak-kanak.

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Data Induk dengan Seni Bina Didorong Peristiwa dalam Vue.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!