目录
- $emit和$on的使用及说明
- 1. vm.$on(event,callback)
- 2. vm.$emit(eventName,[…args])
- 3.示例
- $emit和$on（在同一个组件中的用法 ）
$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="../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'}])
}
}
这儿的数组也可以这样子理解，当触发按纽的时候，它去寻找需要监听事件时，不管找到的是字符串还是数组，只要监听的事件名字中有相对应的名字，它都会执行。【打个生活中的小例子，哪儿都有你。】
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。