Vue.js 2.0 中#$on与$emit如何使用之实例讲解

不念不忘少年蓝@ 2022-06-05 06:27 190阅读 0赞

\#\#\#先对两个方法来一波解释  
\#\#\#\#vm.$on(event,callback)  
参数：  
\{string | Array\} event (数组只在 2.2.0+ 中支持)  
\{Function\} callback

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

示例：

vm.$on('test', function (msg) {   
    console.log(msg) 
    }) 
    vm.$emit('test', 'hi') 
    // => "hi"

\#\#\#\#vm.$emit(event,\[args\])  
参数：  
\{string\} event  
\[…args\]  
触发当前实例上的事件。附加参数都会传给监听器回调。

上面是官方的api，很简洁，粗略一看很容易误解，这里主要是`$on`的用法，这里回过头去看一下`$on`的用法，`$on`是监听当前实例上的自定义事件，这个自定义事件可以由`$emit`来触发，`$on`回调函数接收的msg便是`$emit`方法第二个参数传过来的值。当然你也可以在回调函数里不使用msg参数而执行其他操作。

下面是实例：

> 定义一个组件（一个计数的组件）

Vue.component('simple-com',{
       	template:'<button v-on:click="incresone">{
       {count}}</button>',
       	data:function(){
       		return {
       			count:0
       		}
       	},
       	methods:{
       		incresone:function(){
       			this.count+=1
       			//监听自定义的事件
       			this.$on('increment',function(msg){//监听increment事件
       				//获取$emit方法传递的第二个参数
       				console.log(msg);
       				alert("1");
       			})
       			this.$emit('increment',this.count)  //触发自定义的increment事件
       		}
       	}
       })

> 使用组件

<simple-com v-on:increment="incretol"></simple-com>
    	<simple-com v-on:increment="incretol"></simple-com>
    	<simple-com v-on:increment="incretol"></simple-com>
    	<p>{
       {total}}</p>

> 实例化vue的代码

var vm = new Vue({
    	el:"#app",
    	data: {
    		total:0
    	}
    	methods:{
    		incretol:function(){
    		   		this.total+=1
    		   	}
    	}
    })

> 当我点击计数的时候，$on监听increment事件，当increment事件执行时，便会弹出1，然后再继续执行后面的代码。

![这里写图片描述][format_png]

> 当然$emit方法传递的第二个参数也能获取到

![这里写图片描述][format_png 1]  
不懂得可以留言讨论哦！

[format_png]: /images/20220605/6d71065a9527449db401416734388708.png
[format_png 1]: /images/20220605/cc482b046bd2419386d766a8dcc06e76.png