vue $on 和 $emit 一起使用：监听自定义事件--》触发自定义事件--》触发监听结果

$on 和 $emit 一起使用

$on：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

$emit：触发当前实例上的事件。附加参数都会传给监听器回调。

例子解析：

1. $on 监听自定义事件要在事件执行前被监听。所以例子中在生命周期 beforeCreate 就开始了监听自定义事件 "start"。

2. 在methods 定义了一个 aler 函数。需要在组件上绑定了 v-on: click="aler"来触发这个函数。

函数中的 this.$emit("start",...)  触发了一个自定义事件 "start"。然后监听器 this.$on('start',function(...) ) 监听到这个自定义事件 "start" 的触发，执行了监听器里面的函数。并接收了 $emit 传过来的参数 （arg）

3. 监听事件与被监听事件执行顺序： 监听器 $on 监听到自定义函数后，会马上执行监听器里的函数，然后再执行 $emit 自定义事件里面的动作 。

<div id="div">
  <form>
    <input is="welcome-button" ref="input" v-on:click.native="aler">
    </input>
  </form>
</div>

<script>
 
Vue.component("welcome-button",{
	template:`<form><input>点击通过emit( )触发事件</input></form>`,
	data:function(){
		return {mes:"good good study"}}
		}
)

new Vue({
	el:"#div",
	beforeCreate:
		function(){
		this.$on('start',function(arg){
			alert(arg)})
   },
   methods:{
	 aler:function(){
		   this.$emit("start","监听器监听到了:'star'函数被触发")
		   alert("用emit触发 'star' 自定义事件，已经传给监听器")	 	      
	   }   
   }
  })
</script>

网页渲染效果： 

监听事件与被监听事件执行顺序：

1. 监听器 $on 监听到自定义函数后，会首先执行监听器里的函数，

2. 然后再执行 $emit 自定义事件里面的动作 。

---

 

其他监听器：

 

监听生命周期钩子：相当于监听自定义事件

官网例子中，直接监听生命周期钩子 hook:beforeDestroy