跟着視頻中老師的教學視頻學vue的時候，看很多時候都用@(v-on)來監聽子級emit的自定義事件，但在bus總線那塊，又用.$on來監聽bus自身emit的事件，v-on之間似乎相似但又不同，今天對照vue官網api學習並coding了相關代碼，兩者的用法與比較描述如下。
| v-on | vm.$on |
| 可監聽普通dom的原生事件； 可監聽子組件emit的自定義事件；
|
監聽當前實例的自定義事件 |
vue官網相關說明截圖：
由此可見，想監聽vue實例自身自定義事件，只能用.$on並且這是vue實例的方法，不能用在普通dom上；
v-on用在在普通dom標簽上，可以監聽原生事件；用在vue組件標簽上，可以監聽子組件emit的自定義事件；
具體代碼實踐如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!--監聽子組件emit的自定義事件-->
<child @change="handleChange">child1</child>
<child @change="handleChange">child2</child>
<child @change="handleChange">child3</child>
</div>
</body>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
var Child = {
template:`<div @click='handleClick'>
<slot></slot>
</div>`,
methods:{
handleClick(){
this.$emit( 'change' );
}
},
mounted(){
//監聽當前實例的自定義change事件
this.$on( 'change',function(){
console.log( 'child-change-event-handler' );
} );
}
};
var vm = new Vue({
el:'#app',
components:{
Child,
},
methods:{
handleChange(){
console.log( 'parent-change-event-handler' );
},
handleClick(){
console.log( 'handleClick' );
}
},
mounted(){
this.$on( 'change',this.handleChange );
}
});
</script>
</html>
通過上述代碼實例可知，一個組件實例的定義事件既可以通過.$on被自身捕獲，也可以通過v-on被父級捕獲。事件想要傳到父級組件，必須用emit進行bubble處理。