Class emit/on消息监听

emit和on配对使用，emit是发送消息，on是监听消息，发送和监听匹配通过关键字 。

使用方法如下

消息发送：this.$emit('msg', {key:value})

消息监听：this.$on('msg'，(e)=>{})

消息传递：

一般是组件内的局部监听，如果要实现跨组件或全局，需要配合使用provide和inject将能响应的组件实例传递（this）
1.在父组件，定义触发消息this.$emit('key', data)
2.在父组件，在provide注册当前组件实例obj:this
3.在子组件，在inject接受组件实例obj
4.在子组件，通过this.obj.$on('key',(e)=>{})

代码

父组件

<template>
    <div>
        <!-- 局部：监听通讯 -->
        <div class="mt-5">组建内emit/on:{{content}}</div>
        <button class="btn btn-primary mt-2" @click="test">点击</button>
        <!-- 如果父组件下有多个子组件，数量未知情况，如何随时通知任何子组件 -->
         <demo-item></demo-item>
          <demo-item></demo-item>
        <!-- 全局监听 在app.vue注册proveide，在子/孙组建注入inject-->
        
    </div>
</template>

<script>
    import demoItem from "./demo-item.vue"
    export default {
        data() {
            return {
                content: ''
            }
        },
        //注册provide
        provide(){
            return {
                $_demo:this
            }
        },
        components:{
            demoItem
        },
        mounted(){
            // 组建内部响应
            this.$on('test', (e)=>{
                console.log('组建内的监听');
                console.log(e);
                this.content = e.value
            })
        },
        methods:{
            test(){
                this.$emit('test', {
                    value:'通讯' + Math.floor(Math.random()*100,2)
                })
            }
        }
    }
</script>

<style>
</style>

子组件

<template>
    <div>
        <div>=========子组建=========</div>
        <div>
            <label for="">父组建信息:{{content}}</label>
        </div>
        <div>
            <label for="">全局信息:{{content_all}}</label>
        </div>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                content:'默认',
                content_all:'默认'
            }
        },
        //inject注册父组建实例
        inject:['$_demo','$_app'],
        mounted() {
            // 父组建
            this.$_demo.$on('test' , (e)=>{
                console.log('接受来自父类的信息');
                console.log(e);
                this.content = e.value
            })
            // 全局
            this.$_app.$on('all' , (e)=>{
                console.log('接受来自全局的信息');
                console.log(e);
                this.content_all = e.value
            })
        }
    }
</script>

<style>
</style>