Vue $on方法是一個很有用的特性,它主要用于實現組件之間的通信。Vue組件之間的通信通常通過父子組件之間的props和事件來實現,但有時候我們需要實現不相關組件之間的通信,這時候就可以使用Vue $on方法。
//代碼示例 //在組件A中觸發事件 this.$emit('my-event', arg) //在組件B中監聽事件 mounted(){ this.$root.$on('my-event', this.handleMyEvents) }, methods: { handleMyEvents(arg){ //處理事件回調 } }
在上面的代碼示例中,我們在組件A中觸發my-event事件并傳遞參數arg,然后在組件B中使用Vue $on方法監聽my-event事件,并指定要調用的回調函數handleMyEvents。當組件A觸發my-event事件時,組件B中的handleMyEvents方法被調用并傳遞參數arg。
需要注意的是,在Vue實例中,我們可以使用$on方法來監聽全局事件。例如,我們可以在Vue實例中使用$on方法來監聽路由切換事件。
//代碼示例 //在Vue實例中監聽路由切換事件 mounted(){ this.$root.$on('route-changed', this.handleRouteChanged) }, methods: { handleRouteChanged(to, from){ //處理路由切換事件 } } //在路由切換時觸發事件 this.$emit('route-changed', to, from)
如上所示,我們可以在Vue實例中使用$on方法來監聽全局路由切換事件,并在事件回調函數中處理路由切換事件。同樣,我們可以在路由切換時使用$emit方法來觸發事件。
總之,Vue $on方法是一個非常有用的特性,它可以幫助我們實現組件之間的通信和全局事件的監聽。但需要注意的是,如需跨越多個組件傳遞事件和數據,建議使用Vuex來管理應用程序的狀態。
上一篇mysql全表搜索關鍵字
下一篇python+打印+%d