Cara berkomunikasi antara komponen ibu bapa dan anak dalam Vue

Dengan pembangunan berterusan rangka kerja bahagian hadapan, Vue.js telah menjadi salah satu rangka kerja pilihan bagi banyak pembangun. Vue.js ialah rangka kerja JavaScript progresif yang menyediakan kaedah pembangunan yang cekap, fleksibel, sangat dipercayai dan boleh diselenggara. Dalam Vue.js, komponen ialah konsep penting Sama ada anda melaksanakan halaman kompleks atau membina aplikasi komponen, anda perlu menggunakan komponen untuk melaksanakannya.

Dalam Vue.js, komponen boleh disarangkan dalam komponen lain untuk membentuk hubungan komponen ibu bapa-anak. Pada masa ini, komponen induk dan komponen anak sering perlu berkomunikasi antara satu sama lain untuk melengkapkan beberapa logik perniagaan yang kompleks. Artikel ini akan memperkenalkan cara berkomunikasi antara komponen ibu bapa dan anak dalam Vue.js.

1. Aliran data sehala

Dalam Vue.js, komponen induk menghantar data kepada komponen anak secara amnya dalam bentuk aliran data sehala, iaitu komponen induk menghantar atribut props kepada data anak, dan subkomponen tidak boleh mengubah suai data ini secara langsung.

Komponen induk menghantar data dengan mentakrifkan atribut prop pada komponen anak, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <!-- 父组件向子组件传递 count 数据 -->
    <child-component :count="count"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      count: 0
    }
  }
}
</script>

Data yang diluluskan oleh komponen induk diterima melalui prop dalam komponen anak, seperti ditunjukkan di bawah :

<template>
  <div>
    <!-- 子组件通过 props 接收 count 数据 -->
    <div>count: {{ count }}</div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0
    }
  }
}
</script>

Ini melengkapkan proses penghantaran data daripada komponen induk kepada komponen anak Komponen anak boleh menggunakan data yang diterima untuk operasi pemaparan, tetapi tidak boleh mengubah suai data secara langsung.

2. Komponen anak menghantar data kepada komponen induk

Dalam Vue.js, komponen anak menghantar data kepada komponen induk melalui acara tersuai. Komponen anak mencetuskan acara melalui kaedah $emit, dan komponen induk mendengar dengan menambahkan arahan v-on pada komponen anak untuk mengikat acara.

Contohnya, tentukan butang dalam komponen anak Apabila butang diklik, peristiwa dicetuskan dan data dihantar ke komponen induk melalui kaedah $emit, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <button @click="sendData">传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendData () {
      // 通过 $emit 方法触发事件，并传递数据
      this.$emit('send-data', '这是子组件传递的数据')
    }
  }
}
</script>

Dalam komponen induk, gunakan Arahan v-on mengikat peristiwa, mendengar peristiwa yang dicetuskan oleh sub-komponen dan menerima data yang diluluskan oleh sub-komponen, seperti ditunjukkan di bawah:

<template>
  <div>
    <!-- 绑定子组件事件，监听子组件触发的事件 -->
    <child-component @send-data="getData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    getData (msg) {
      console.log(msg) // 打印子组件传递的数据
    }
  }
}
</script>

Ini melengkapkan proses pemindahan data daripada sub-komponen ke komponen induk Komponen anak mencetuskan peristiwa dan menghantar data melalui kaedah $emit, dan komponen induk mengikat peristiwa melalui arahan v-on untuk mendengar dan menerima data yang diluluskan oleh anak. komponen.

3 Gunakan atribut $parent dan $children

Selain daripada dua kaedah di atas, Vue.js juga menyediakan dua atribut, $parent dan $children, untuk merealisasikan hubungan antara ibu bapa dan komponen komunikasi kanak-kanak. Gunakan sifat $parent untuk mengakses data dan kaedah komponen induk dalam komponen anak, dan gunakan sifat $children untuk mengakses data dan kaedah komponen anak dalam komponen induk.

Sebagai contoh, untuk mengakses data dan kaedah komponen induk dalam komponen anak, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <button @click="getParentData">获取父组件的数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    getParentData () {
      // 使用 $parent 属性访问父组件的数据和方法
      console.log(this.$parent.count) // 访问父组件的 count 数据
      this.$parent.sayHello() // 调用父组件的 sayHello 方法
    }
  }
}
</script>

Untuk mengakses data dan kaedah komponen anak dalam induk komponen, anda boleh menggunakan Atribut $children, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <button @click="getChildData">获取子组件的数据</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    getChildData () {
      // 使用 $children 属性访问子组件的数据和方法
      console.log(this.$children[0].count) // 访问第一个子组件的 count 数据
      this.$children[0].sayHello() // 调用第一个子组件的 sayHello 方法
    }
  }
}
</script>

Walau bagaimanapun, menggunakan atribut $parent dan $children untuk komunikasi antara komponen ibu bapa dan anak tidak mematuhi prinsip komunikasi komponen Vue. js, dan tidak disyorkan untuk kegunaan kerap. Kerana pendekatan ini akan menggabungkan komponen anak dan komponen induk dengan ketat, menjadikannya sukar untuk mengembangkan dan mengekalkan kod.

Ringkasan

Dalam Vue.js, kaedah props dan $emit boleh digunakan untuk melaksanakan aliran data sehala dan pengikatan dua hala antara komponen induk dan komponen anak. Anda juga boleh menggunakan $ atribut ibu bapa dan $ anak untuk melaksanakan komunikasi antara komponen ibu bapa dan anak. Tidak kira kaedah yang digunakan, adalah perlu untuk sentiasa mempertimbangkan pengembangan dan penyelenggaraan komunikasi komponen untuk mengelakkan gandingan yang ketat, dengan itu menjadikan kod lebih mudah, berskala dan boleh diselenggara.

Atas ialah kandungan terperinci Cara berkomunikasi antara komponen ibu bapa dan anak dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!