vue $on方法是vue中用于自定義事件的方法之一。當我們在組件中需要自定義事件并在其他組件或者全局中進行監聽與觸發時,就需要使用$on方法。
具體來說,$on方法就是通過添加一個事件監聽器來監聽指定的自定義事件。在vue中通過$emit方法觸發自定義事件后,$on就可以將其捕獲并執行對應的回調函數。
//示例代碼: Vue.component('my-component', { methods: { handleClick() { this.$emit('my-event', 123) } } }) new Vue({ el: '#app', mounted() { this.$on('my-event', function(num) { console.log(num) }) } })
在上述示例代碼中,我們通過在組件中使用$emit方法觸發了一個名為my-event的自定義事件,同時在全局中通過$on方法監聽這個事件。當my-event事件被觸發時,$on就會捕獲這個事件并執行相應的回調函數,打印出傳入的參數123。
需要注意的是,$on方法添加的事件監聽器只能在當前vue實例中進行觸發。如果需要在其他vue實例中觸發該事件,則需要使用$emit方法傳遞事件到其他實例中,或者使用全局事件總線。
總之,$on方法是vue中非常常用的一個方法,通過它可以實現組件之間的解耦、事件的自由觸發與監聽等功能,是vue框架中不可缺少的一部分。