$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: ` <button @click="$emit('welcome')">点击按钮</button> ` }) // 父组件 <div> <welcome-button v-on:welcome="sayHi"></welcome-button> </div> ... ... ... methods: { sayHi() { alert('Hi!') } }
3.示例
有时候项目里面会遇到子组件与子组件通信。比如以下情况:
页面里引入了header组件和content组件,点击content组件的按钮,想要改变header组件的内容。
<template> <div class="home"> <v-header></v-header> <v-content></v-content> </div> </template> <script>
(1)首先,在main.js里面全局注册一个eventbus的方法
import Vue from 'vue'; import App from './App.vue'; import router from './router'; Vue.config.productionTip = false; Vue.prototype.$EventBus = new Vue(); new Vue({ router, render: h => h(App), }).$mount('#app')
(2)然后在content组件注册一个自定义事件:
<template> <div class="content"> <img alt="Vue logo" src="https://www.atool.online/assets/logo.png"> <button @click="changeEvent">I am content!</button> </div> </template> <script> export default { name: 'Content', methods: { changeEvent() { // 注册一个自定义事件 this.$EventBus.$emit("changeNum",123) } } } </script> <style scoped> button{ width: 200px; height: 50px; display: block; margin: 0 auto; border: none; color: #fff; font-size: 20px; border-radius: 6px; background: #007ef3; } </style>
(3)在header组件监听接收这个值:
<template> <div class="header"> <h1>{{headStr}}</h1> </div> </template> <script> export default { name: 'Header', data(){ return{ headStr:"This is my head!" } }, created() { // 监听接收这个值 this.$EventBus.$on("changeNum", (val) => { this.headStr = val; }); } } </script> <style scoped> </style>
点击按钮,header变化如下:
这样就可以完成子组件与子组件之间的传值了,当然也可以用Vuex进行子组件之间传值。
$emit和$on(在同一个组件中的用法 )
百度之后,终于明白$emit 和 $on 的基础用法。不多说 ,直接上课。
- $on('事件名字'); /监听事件,事件名字是 str型
- $emit('事件名字',回调函数);//事件名字是 str型,当然,可以有多个事件名字,如果存在多个事件名字,那么就是用数组。
假设有一个按纽,希望在点击按纽之后触发某一个方法。那么我们可以这样。
<button @click='emit'>只触发一个方法</button> 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能接收到 下面的参数 }) //那么,这个按纽在点击之后就会触发这三个方法。
或许,有同学会问了,刚我提到,在监听事件晨在,监听的事件可以是数组。没错,是数组,即
<button @click='emit'>只触发一个方法</button> 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'}]) } }
这儿的数组也可以这样子理解,当触发按纽的时候,它去寻找需要监听事件时,不管找到的是字符串还是数组,只要监听的事件名字中有相对应的名字,它都会执行。【打个生活中的小例子,哪儿都有你。】
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。