vue基础-浅谈vue中$emit和$on的基本用法

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、组件之间的通讯详见下一篇