Cara menggunakan fungsi bas acara dalam dokumentasi Vue

Cara menggunakan fungsi bas acara dalam dokumentasi Vue

Dalam pembangunan Vue, kita selalunya perlu memindahkan data atau kaedah panggilan antara komponen yang berbeza. Bas acara menyediakan cara yang mudah dan fleksibel untuk melaksanakan komunikasi antara komponen.

Bas acara adalah sebahagian daripada contoh Vue yang membolehkan komponen berkomunikasi antara satu sama lain. Ringkasnya, bas acara ialah contoh Vue yang boleh digunakan untuk komunikasi antara komponen. Dalam erti kata lain, kita boleh menggunakan bas acara untuk merealisasikan pemindahan maklumat dan kaedah panggilan antara komponen.

Penggunaan:

Langkah pertama dalam menggunakan bas acara adalah untuk menjadikannya instantiat dalam tika Vue. Kami boleh membuat instantiate bas acara dalam fail main.js dan melekapkannya pada prototaip Vue.

import Vue from 'vue'
Vue.prototype.$bus = new Vue()

Dalam kod di atas, kami menambah objek Vue.prototype. pada tika Vue melalui $bus dan menetapkannya kepada tika Vue baharu. Dengan cara ini, kita boleh berkomunikasi antara komponen melalui objek $bus.

Gunakan bas acara untuk menerbitkan dan melanggan acara

Seterusnya kita boleh menggunakan objek $bus untuk menerbitkan dan melanggan acara. Kita boleh menggunakan kaedah $bus.$on() dalam komponen yang perlu melanggan acara untuk melanggan acara Apabila acara dicetuskan, fungsi panggil balik akan dilaksanakan.

Sebagai contoh, acara bernama foo dilanggan dalam komponen A:

this.$bus.$on('foo', (msg) => {
  console.log(msg)
})

Acara foo dengan nama yang sama dicetuskan dalam komponen B:

this.$bus.$emit('foo', 'this is message from component B')

Ini akan mengeluarkan this is message from component B dalam konsol komponen A.

Gunakan bas acara untuk memanggil kaedah

Selain menerbitkan dan melanggan acara, kami juga boleh menggunakan kaedah $bus.$emit() untuk memanggil kaedah. Kaedah panggilan kaedah ini juga dipanggil panggilan fungsi.

Tentukan kaedah handleClick() dalam komponen A:

methods: {
  handleClick(msg) {
    console.log(msg)
  }
}

Gunakan kaedah $bus.$emit() dalam komponen B untuk memanggil kaedah handleClick() dalam komponen A:

this.$bus.$emit('handleClick', 'this is a test message')

Ini akan mengeluarkan this is a test message dalam konsol komponen A.

Ringkasan:

Dengan menggunakan bas acara, kami boleh menerbitkan dan melanggan acara dengan mudah serta kaedah panggilan antara komponen Vue. Bas acara mempunyai pelbagai senario aplikasi dalam pembangunan Vue dan boleh membantu kami mengatur dan mengurus komunikasi antara komponen dengan lebih baik.

Atas ialah kandungan terperinci Cara menggunakan fungsi bas acara dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!