Tutorial asas VUE3: menggunakan bas acara Vue.js

Vue.js ialah rangka kerja JavaScript bahagian hadapan yang popular, dan bas acaranya wujud sebagai salah satu fungsi terasnya. Dalam Vue.js, bas acara bertindak sebagai medium untuk komunikasi antara komponen. Artikel ini akan memperkenalkan anda kepada cara menggunakan bas acara Vue.js.

Apakah bas acara itu?

Bas acara ialah pelaksanaan corak bas acara pusat. Ringkasnya, bas acara ialah contoh Vue global yang boleh kami gunakan di mana-mana sahaja dalam aplikasi kami. Ia bertindak sebagai medium untuk komunikasi antara komponen.

Vue.js memasang bas acara pada Vue.prototype, yang bermaksud ia adalah sebahagian daripada tika Vue, jadi anda boleh menggunakannya di mana-mana dalam aplikasi anda.

Bagaimana untuk menyediakan bas acara?

Menyediakan bas acara semudah mengisytiharkannya dalam tika Vue baharu. Dalam fail main.js anda, anda boleh menambah kod berikut:

Vue.prototype.$bus = new Vue();

Barisan kod ini membuat instance Vue dan melekapkannya pada Vue.prototype, menjadikannya sebagai bahagian Vue. Sekarang, anda boleh menggunakan $bus dalam mana-mana komponen.

Bagaimana untuk menghantar mesej antara komponen?

Menghantar mesej antara komponen adalah sangat mudah menggunakan bas acara. Anda hanya perlu menghantar mesej dalam satu komponen dan mendengar mesej dalam komponen lain. Mari lihat contoh:

// 组件 A
this.$bus.$emit('message', 'hello from A');

// 组件 B
this.$bus.$on('message', message => {
  console.log(message); // hello from A
});

Dalam komponen A, kami menggunakan kaedah $emit untuk menghantar mesej 'mesej' dengan data 'hello from A'. Dalam komponen B, kami menggunakan kaedah $on untuk mendengar mesej 'mesej' dan memproses mesej dalam fungsi panggil balik.

Perlu diingat bahawa apabila komponen dimusnahkan, pendengar acara perlu dialih keluar menggunakan kaedah $off untuk mengelakkan kebocoran memori.

Bagaimana untuk menggunakan bas acara dalam aplikasi?

Sekarang anda tahu cara menyediakan bas acara dan menghantar mesej antara komponen, bagaimanakah anda menggunakannya dalam aplikasi anda? Berikut ialah contoh mudah:

// App.vue
<template>
  <div>
    <router-view />
    <button @click="sendMessage">Send message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$bus.$emit('message', 'hello from App');
    }
  }
};
</script>

// Home.vue
<template>
  <div>
    <h1>Welcome Home</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.$bus.$on('message', message => {
      this.message = message;
    });
  }
};
</script>

Dalam contoh ini, kami mentakrifkan butang dalam App.vue yang menghantar mesej 'mesej'. Dalam Home.vue, kami menggunakan kaedah $on untuk mendengar mesej 'mesej' dan memaparkan mesej pada halaman.

Ringkasan

Bas acara ialah ciri Vue.js yang sangat penting yang boleh membantu anda mencapai komunikasi antara komponen. Dengan menggunakan kaedah $emit dan $on, anda boleh menghantar mesej antara komponen dengan mudah. Ingat untuk menggunakan kaedah $off untuk mengalih keluar pendengar acara apabila komponen dimusnahkan untuk mengelakkan masalah kebocoran memori. Saya harap artikel ini berguna kepada anda, terima kasih kerana membaca!

Atas ialah kandungan terperinci Tutorial asas VUE3: menggunakan bas acara Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!