v-on与vm.$on的区别
<p><a href="https://www.cnblogs.com/surfer/p/9815692.html" title="vue中的事件监听之——v-on vs .$on">vue中的事件监听之——v-on vs .$on</a></p>
<p>跟着视频中老师的教学视频学vue的时候，看很多时候都用@(v-on)来监听子级emit的自定义事件，但在 <a href="https://www.jianshu.com/p/a544728bf596" title="bus总线">bus总线</a> 那块，又用.$on来监听bus自身emit的事件，v-on之间似乎相似但又不同，今天对照vue官网api学习并coding了相关代码，两者的用法与比较描述如下。</p>
<table>
<thead>
<tr>
<th style="text-align: left;">v-on</th>
<th style="text-align: left;">$on</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">可监听普通dom的原生事件；<br>可监听子组件emit的自定义事件；</td>
<td style="text-align: left;">监听当前实例的自定义事件</td>
</tr>
</tbody>
</table>
<h4>vue官网相关说明截图：</h4>
<p><img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/baa0abe2bdff94cc8ebce52df55771eb?showdoc=.jpg" alt="" /></p>
<p><img src="https://www.showdoc.cc/server/api/attachment/visitfile/sign/27c3dc0fae549188bc90de883276cae4?showdoc=.jpg" alt="" /></p>
<p>由此可见，想监听vue实例自身自定义事件，只能用.$on并且这是vue实例的方法，不能用在普通dom上；</p>
<p>v-on用在在普通dom标签上，可以监听原生事件；用在vue组件标签上，可以监听子组件emit的自定义事件；</p>
<pre><code class="language-plantuml">@startuml
title $emit 触发自定义事件流程
|子组件|
start
:子组件$emit(EVENT,arg);
|#AntiqueWhite|父组件|
if (是否有v-on:EVENT="FN"？) then (是)
:执行FN方法|
endif
|子组件|
if (是否有$on(EVENT,FN)？) then (是)
:执行FN方法|
endif
stop
@enduml
</code></pre>
<h4>具体代码实践如下：</h4>
<pre><code class="language-html"><!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></code></pre>