Vue的broadcast關鍵字是一種事件觸發機制,它使得父組件可以向所有子組件廣播某個事件。子組件通過監聽事件,可以接收到廣播,并執行相應的回調函數。
使用broadcast需要在父組件中注冊事件,然后在子組件中通過$on來監聽注冊的事件,當父組件觸發該事件時,子組件的回調函數將會被執行。下面是一個簡單的示例:
// 父組件 Vue.component('parent', { methods: { handleClick() { this.$broadcast('my-event', 'hello world!'); } } }); // 子組件 Vue.component('child', { created() { this.$on('my-event', (msg) =>{ console.log(msg); // 輸出 'hello world!' }); } });
需要注意的是,在Vue 2.0中,broadcast被廢棄了,取而代之的是$emit和$on。$emit方法可以向父組件觸發某個事件,而$on方法則可以監聽該事件。下面是一個示例:
// 父組件 Vue.component('parent', { methods: { handleClick() { this.$emit('my-event', 'hello world!'); } } }); // 子組件 Vue.component('child', { created() { this.$parent.$on('my-event', (msg) =>{ console.log(msg); // 輸出 'hello world!' }); } });
在Vue 2.0中,由于broadcast被廢棄,$parent.$on的用法需要注意一下。$parent表示當前組件的父組件,因此在子組件中監聽父組件的事件必須使用$parent.$on方法。