Kaedah pelaksanaan fungsi mengikat data dua hala komponen induk-anak dalam dokumen Vue

Vue ialah rangka kerja JavaScript moden untuk membina antara muka web Ia digemari oleh pembangun kerana kesederhanaan dan kemudahan penggunaan, prestasi cemerlang dan dokumentasi terperinci. Antaranya, pengikatan data dua hala antara komponen induk dan anak merupakan salah satu fungsi teras komunikasi komponen Vue Ia boleh memindahkan keadaan komponen dengan cepat kepada komponen anak, memantau perubahan dalam keadaan komponen anak dan suapan balik kepada komponen induk, melengkapkan aliran dua hala data. Artikel ini akan memperkenalkan kaedah pelaksanaan fungsi mengikat data dua hala bagi komponen induk-anak dalam dokumen Vue.

Untuk memindahkan data antara komponen induk dan anak, anda boleh menggunakan kaedah props dan $emit, dengan props ialah parameter komponen Vue dan digunakan untuk memindahkan data daripada komponen induk kepada komponen anak, dan Kaedah $emit ialah contoh Vue yang digunakan untuk menghantar data daripada komponen anak kepada komponen induk. Jika anda perlu melaksanakan pengikatan data dua hala, anda perlu menambah pengubah suai model .v pada prop dalam komponen induk dan mencetuskan peristiwa input dalam komponen anak untuk mengemas kini nilai komponen induk.

Berikut ialah contoh komponen ibu bapa-anak yang melaksanakan pengikatan data dua hala:

// 父组件
<template>
  <div>
    <label>姓名：</label>
    <input v-model="name">
    <ChildComponent v-model="name"></ChildComponent>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <label>子组件输入：</label>
    <input type="text" :value="value" @input="updateValue($event.target.value)">
  </div>
</template>
<script>
export default {
  props: {
    value: String
  },
  methods: {
    updateValue(value) {
      this.$emit('input', value)
    }
  }
}
</script>

Dalam komponen induk, kami mentakrifkan nama pembolehubah bernama dan menyerahkannya kepada komponen anak ChildComponent. Dalam komponen anak, kami menggunakan prop untuk menerima nilai yang diluluskan oleh komponen induk, dan menggunakan pengubah suai model v untuk melaksanakan pengikatan data dua hala, mengikat nilai komponen anak kepada pembolehubah nama komponen induk dan gunakan kaedah $emit untuk mencetuskan Peristiwa input, menghantar nilai dalam komponen anak.

Perlu diambil perhatian bahawa apabila menggunakan pengubahsuai model v dalam props, anda bukan sahaja mesti menentukan atribut nilai untuk menerima nilai yang diluluskan oleh komponen induk, tetapi juga mentakrifkan atribut yang dikira bernama nilai dalam anak. component. , digunakan untuk mengikat nilai kotak input dalam komponen anak. Apabila nilai kotak input berubah, gunakan kaedah updateValue untuk mencetuskan peristiwa input dan hantar nilai baharu dalam komponen anak kepada komponen induk untuk kemas kini.

Selain menggunakan pengubah model v untuk melaksanakan pengikatan data dua hala, Vue juga menyediakan pengubah .sync untuk memudahkan kod dan memudahkan membaca, menulis dan memahami. Dalam komponen induk, kami hanya menggantikan v-model dengan :value.sync:

<template>
  <div>
    <label>姓名：</label>
    <input :value.sync="name">
    <ChildComponent :value.sync="name"></ChildComponent>
  </div>
</template>

Dalam komponen anak, kami hanya menggunakan kaedah ini.$emit('update:value ', value) untuk mencetuskan kemas kini acara, yang boleh menghantar nilai dalam komponen anak kepada komponen induk untuk kemas kini.

Kaedah pelaksanaan fungsi pengikatan data dwiarah komponen ibu bapa-anak dalam dokumen Vue memberikan kami kaedah komunikasi komponen yang mudah, cepat dan cekap dengan menggunakan pengubah v-model dan .sync, menjadikannya lebih mudah untuk dilaksanakan dalam pembangunan aplikasi Ia memudahkan untuk merealisasikan aliran dua hala data.

Atas ialah kandungan terperinci Kaedah pelaksanaan fungsi mengikat data dua hala komponen induk-anak dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!