vue中关于$emit和$on的使用及说明_vue.js_

$emit和$on的使用及说明

1. vm.$on(event,callback)

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

个人理解：监听接收传来的值

vm.$on('test',function(msg){ console.log(msg) })

示例：

2. vm.$emit(eventName,[…args])

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

个人理解： 注册一个自定义事件

// 只配合一个事件名使用emit // 子组件 Vue.component('welcome-button',{ template: ` 点击按钮 ` }) // 父组件 
 ... ... ... methods: { sayHi() { alert('Hi!') } }

3.示例

有时候项目里面会遇到子组件与子组件通信。比如以下情况：

页面里引入了header组件和content组件，点击content组件的按钮，想要改变header组件的内容。

（3）在header组件监听接收这个值:

点击按钮，header变化如下：

这样就可以完成子组件与子组件之间的传值了，当然也可以用Vuex进行子组件之间传值。

$emit和$on（在同一个组件中的用法 ）

百度之后，终于明白$emit 和 $on 的基础用法。不多说 ，直接上课。

• $on('事件名字'); /监听事件，事件名字是 str型
• $emit('事件名字',回调函数);//事件名字是 str型，当然，可以有多个事件名字，如果存在多个事件名字，那么就是用数组。

假设有一个按纽，希望在点击按纽之后触发某一个方法。那么我们可以这样。

只触发一个方法 created () { this.$on('wash_Goods',(arg)=> { console.log(arg)//这儿的arg能接收到 下面的参数 }) }, methods : { emit () { this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}]) } }

我们可以这样子去理解，首先，点击按纽，它就会走emit的方法。 在该方法中。遇到emit，那么它就会找它需要监听到washGoods的事件，找啊找。

然后，它在created的生命周期中找到了。原来，在created生命周期中有一个叫this.on(‘wash_Goods’)的监听事件。同时，该事件会有一个对应的执行方法。那么，它就会顺着走下去，直接执行 刚在 this.$on(‘wash_Goods’)的监听方法。

this.$on('wash_Goods',(arg)=> { console.log(1) console.log(arg)//这儿的arg能接收到 下面的参数 }) this.$on('wash_Goods',(arg)=> { console.log(2) console.log(arg)//这儿的arg能接收到 下面的参数 }) this.$on('wash_Goods',(arg)=> { console.log(3) console.log(arg)//这儿的arg能接收到 下面的参数 }) //那么，这个按纽在点击之后就会触发这三个方法。 

或许，有同学会问了，刚我提到，在监听事件晨在，监听的事件可以是数组。没错，是数组，即

只触发一个方法 created () {     this.$on('wash_Goods',(arg)=> {         console.log('执行1')         console.log(arg)     })     this.$on(['wash_Goods','abcdef'],(arg)=> {         console.log('执行2') //这个也会被执行         console.log(arg)     }) }, methods : {     emit () {         this.$emit('wash_Goods',['fish',true,{name:'vue',verison:'2.4'}])     } }

这儿的数组也可以这样子理解，当触发按纽的时候，它去寻找需要监听事件时，不管找到的是字符串还是数组，只要监听的事件名字中有相对应的名字，它都会执行。【打个生活中的小例子，哪儿都有你。】 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！