Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Mengemas kini Data Induk dengan Seni Bina Didorong Peristiwa dalam Vue.js?

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

Barbara Streisand
Lepaskan: 2024-10-27 11:46:01
asal
466 orang telah melayarinya

How to Update Parent Data with Event-Driven Architecture in 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>
Salin selepas log masuk
<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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan