自定义事件与全局事件总线综合案例

App.vue

<template>
    <div>
        <!-- <Child @myModel="myModel"/> -->
        <Child ref="myChild"/>
        <div>{{ChildMessage}}</div>
        <div>{{GlobalMessage}}</div>
    </div>
</template>
<script>
import Child from ‘./components/Child.vue‘
export default {
    name: "App",
    mounted() {
        this.$refs.myChild.$on("myModel",this.myModel);
        this.$bus.$on("global",this.global)
    },
    components:{
        Child
    },
    data(){
        return{
            ChildMessage:"~~~",
            GlobalMessage:"~~~"
        }
    },
    methods: {
        myModel(value){
            this.ChildMessage = this.ChildMessage+value
        },
        global(value){
            this.GlobalMessage = this.GlobalMessage + value
        }
    },
};
</script>
<style scoped>
</style>

Child.vue

<template>
    <div>
        <button @click="myM">自定义组件</button>
        <button @click="myG">全局事件组件</button>
    </div>
</template>
<script>
export default {
    name: "",
    methods: {
        myM(){
            this.$emit("myModel","子传父")
        },
        myG(){
            this.$bus.$emit("global","Global")
        }
    },
};
</script>
<style scoped>
</style>

自定义事件与全局事件总线综合案例

原文：https://www.cnblogs.com/Listener-wy/p/15008919.html