Tutorial asas VUE3: Beberapa cara komunikasi komponen ibu bapa-anak

Dengan pembangunan berterusan rangka kerja hadapan moden, semakin banyak perusahaan dan pembangun memilih untuk menggunakan Vue untuk membina antara muka pengguna mereka. Vue.js ialah rangka kerja progresif untuk membina antara muka pengguna yang menyediakan kaedah pembangunan yang fleksibel untuk membina aplikasi satu halaman dengan cepat berkualiti tinggi.

Dalam Vue.js, komponen ialah konsep teras untuk membina antara muka pengguna. Komponen Vue.js ialah modul kod serba lengkap dan boleh diguna semula dengan kitaran hayat. Komponen boleh terdiri daripada banyak komponen lain, yang mungkin perlu berkomunikasi dan berinteraksi. Artikel ini akan memperkenalkan beberapa cara untuk berkomunikasi antara komponen ibu bapa dan anak dalam Vue.js.

1. Melalui harta props

Props ialah cara untuk menghantar data daripada komponen induk kepada komponen anak. Dalam Vue.js, komponen induk boleh menghantar data kepada komponen anak melalui sifat. Komponen kanak-kanak boleh menerima sifat ini dan menggunakan nilai ini untuk memaparkan templat mereka sendiri.

Dalam komponen induk, anda boleh menggunakan arahan v-bind untuk mengikat nilai pada atribut props komponen anak:

<template>
  <div>
    <child-component :message="'Hello world'"></child-component>
  </div>
</template>

Dalam komponen anak, anda boleh menerima komponen induk melalui atribut props Data yang diluluskan:

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

Melalui atribut props, aliran data antara komponen induk dan komponen anak dapat dinyatakan dengan jelas. Kaedah ini ialah kaedah komunikasi yang sangat biasa antara komponen ibu bapa dan anak dalam Vue.js.

2. $emit acara tersuai

Dalam Vue.js, setiap tika Vue mempunyai bas acara dan anda boleh menggunakan $emit untuk mencetuskan acara tersuai. Komponen induk boleh menentukan peristiwa tersuai dan menggunakan $emit untuk mencetuskan peristiwa ini dalam komponen anak. Subkomponen boleh mendengar peristiwa ini melalui $on dan melakukan operasi yang sepadan.

Dalam komponen induk, anda boleh menggunakan $emit untuk menentukan acara tersuai:

new Vue({
  el: '#app',
  methods: {
    showMessage() {
      this.$emit('message');
    }
  }
})

Dalam komponen anak, anda boleh menggunakan $on untuk mendengar acara tersuai ini:

Vue.component('child-component', {
  template: '<div v-on:message="showMessage">Child message</div>',
  methods: {
    showMessage() {
      // 处理点击事件
    }
  }
})

Dengan menggunakan acara tersuai $emit, komponen anak boleh menghantar mesej kepada komponen induk untuk mencapai tujuan komunikasi.

3. $parent/$children

Dalam Vue.js, setiap komponen mempunyai $parent property dan $children property. Kedua-dua sifat ini membenarkan komponen mengakses terus komponen induk dan anak mereka. Kaedah ini lebih mudah, tetapi sesetengah orang menganggapnya tidak elegan.

4. Menggunakan $refs

Dalam Vue.js, setiap komponen mempunyai atribut $refs. Gunakan $refs untuk mengakses semua subkomponen berdaftar. Atribut ini membenarkan komponen induk mengakses terus komponen anak dan secara langsung memanggil kaedah dan sifatnya.

Dalam komponen induk, anda boleh menggunakan $refs untuk mengakses komponen anak dan memanggil kaedahnya:

new Vue({
  el: "#app",
  methods: {
    handleClick() {
      this.$refs.childComponent.handleClick();
    }
  },
  components: {
    childComponent
  }
})

Dalam komponen anak, anda boleh menentukan kaedah handleClick:

Vue.component('child-component', {
  methods: {
    handleClick() {
      // 处理点击事件
    }
  }
})

$ Refs membenarkan komponen induk mengakses secara langsung kaedah dan sifat komponen anak, tetapi anda perlu berhati-hati apabila menggunakannya kerana nilai $refs mungkin tidak ditentukan.

Ringkasan

Dalam Vue.js, komponen ialah konsep teras untuk membina antara muka pengguna. Untuk komunikasi antara komponen ibu bapa dan anak, Vue.js menyediakan pelbagai kaedah, seperti Props, acara tersuai, $parent/$children, $refs, dsb. Dalam pembangunan sebenar, kita perlu memilih kaedah yang sesuai untuk melaksanakan komunikasi antara komponen mengikut keadaan tertentu. Pada masa yang sama, kami juga boleh menggunakan kaedah ini untuk membina komponen yang lebih fleksibel dan boleh diguna semula untuk meningkatkan kecekapan pembangunan dan pengalaman pengguna.

Atas ialah kandungan terperinci Tutorial asas VUE3: Beberapa cara komunikasi komponen ibu bapa-anak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!