1、简介:
$on/$emit:实现了事件的定义和消费,通过事件的定义与消费分开进而实现解耦,也达到了组件之间通讯的效果。$on定义事件/并且指定时间的执行对象/函数,$emit 事件的消费。
2、示例
$on的简单代码实例
<template>
<div>
<h1>定义事件</h1>
<v-emit></v-emit>
</div>
</template>
<script>
import bus from "./bus";
import Emit from "./Emit.vue";
export default {
name: "on",
components: {
'VEmit': Emit
},
methods: {
//具体执行的方法
handleEvents(e) {
//打印
console.log(e);
}
}
,
beforeMount() {
//定义事件
bus.$on('my_events', this.handleEvents);
}
}
</script>
<style scoped>
</style>
$emit的简单代码实例
<template>
<div>
<button @click="boost">传值</button>
</div>
</template>
<script>
import bus from "./bus";
export default {
name: "emit",
methods: {
boost() {
//调用之前定义的事件
bus.$emit('my_events', 'hello $emit/$on');
}
}
}
</script>
<style scoped>
</style>
注意在不同的组件下需要引用相同的vue实例
import Vue from 'vue'
let bus = new Vue();
export default bus
3、使用场景
- 父子组件传值:父组件中通过on定义事件,子组件通过$emit调用父组件中的方法
- 非父子组件传值:利用同一个vue实例,重复上一步
4、实现原理
$on(event: string | string[], callback: Function): this;
$emit(event: string, ...args: any[]): this;
5、组件之间的通讯详见下一篇