Vue的事件系統使用了觀察者模式,允許組件之間相互通信。其中Vue實例的$on方法可以用于監聽另一個組件上觸發的事件。
// 監聽事件 vm.$on('my-event', function (msg) { console.log(msg); }) // 觸發事件 vm.$emit('my-event', 'hello');
$on方法接收兩個參數,第一個參數是事件名稱,第二個參數是回調函數。當組件中使用$emit觸發了該事件,$on中綁定的回調函數就會被執行。
需要注意的是,$on方法只能監聽另一個組件上觸發的事件,不能監聽當前組件自身觸發的事件。如果要監聽自身事件,可以使用$watch。
// 監聽屬性變化 vm.$watch('value', function (newVal, oldVal) { console.log('new value:', newVal, ', old value:', oldVal); })
$watch方法接收兩個參數,第一個參數是需要觀察的屬性名稱,第二個參數是回調函數。當屬性值發生改變時,回調函數就會被執行。
總之,$on和$watch都是Vue事件系統中非常重要的方法,可以幫助我們理解組件之間的通信和屬性變化的監聽。