Vue 的 Event Bus 是一個事件中心,可以方便地在組件之間傳遞數據,無論它們彼此多遠。利用 Event Bus,我們可以輕松地在一個組件中發射(emit)事件,然后在另一個組件中偵聽(監聽)該事件,一旦事件被偵聽到,我們就可以執行相應的代碼。
首先,我們需要創建一個新的 Vue 實例并將它作為 Event Bus,可以在 main.js 中全局地注冊該實例:
import Vue from 'vue' export const EventBus = new Vue()
現在我們可以在任何組件中訪問該實例了。我們可以發射一個名為 'my-event' 的事件,事件可以攜帶數據,也可以不攜帶數據:
import { EventBus } from '@/main.js' // 發射事件 EventBus.$emit('my-event', 123)
我們還可以在另一個組件中偵聽該事件,并在回調函數中獲取事件傳遞的數據:
import { EventBus } from '@/main.js' // 偵聽事件 EventBus.$on('my-event', (data) =>{ console.log(data) // 123 })
最后,除了 $emit 和 $on,Event Bus 還有其他一些方法,例如 $once(一次性偵聽事件)、$off(取消偵聽事件)等等。更多關于 Event Bus 的使用,請參考 Vue 官方文檔。
上一篇vue exact
下一篇easyui識別json