一、$emit
1、this $emit(‘自定义事件名’,要传送的数据);
2、触发当前实例上的事件,要传递的数据会传给监听器;
二、$on
1、this. o n ( ′ 事 件 名 ′ , c a l l b a c k ) c a l l b a c k 回 调 on('事件名',callback) callback回调 on(′事件名′,callback)callback回调emit要传送的数据;
2、监听当前实例上自定义事件;
三、实例
<html>
<head>
<title>$emit 和 $on</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="boost">触发事件</button>
</div>
<script>
new Vue({
el: '#root',
data() {
return {
message: 'hello vue'
}
},
created() {
this.$on('my_events', this.handleEvents)
//可以多个监听事件共同使用同一个回调函数
//可以一个监听事件使用多个回调函数,回调函数的调用按顺序调用
//this.$on('my_events2', this.handleEvents)
//this.$on('my_events3', this.handleEvents)
//this.$on('my_events4', this.handleEvents)
//$on第一个参数可以接受一个数组,也就是多个监听事件使用同一个回调函数
// this.$on(['my_events','events2','events3'], this.handleEvents)
},
methods: {
handleEvents(e) {
console.log(this.message, e)
},
boost() {
this.$emit('my_events', 'my params')
}
}
})
</script>
</body>
</html>
1.应用场景,一般在子组件使用this.$emit(‘my_events’, ‘my params’) 定义事件名称my_events,还可以传递数据,列如:‘my params’,
2.然后在父组件中使用 this.on(‘my_events’, this.handleEvents)监听子组件何时出发的方法,my_events是子组件定义的事件名字,this.handleEvents(e){},是this.$on的回调函数,其中e是子组件传递过来的数据。