Vue 事件总线的基本使用

定义事件总线

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
    beforeCreate() {
        //定义全局事件总线
        Vue.prototype.$bus = this
    }
}).$mount('#app');

创建总线事件

<template>
    <div id="app">
        <PropsDemo></PropsDemo>
    </div>
</template>

<script>
    import PropsDemo from "@/components/RefAndPropsDemo/PropsDemo";

    export default {
        name: 'App',
        components: {PropsDemo},
        methods: {
            //准备一个function
            getData(data) {
                console.log("===", data)
            }
        },
        mounted() {
            /**
             * @param event 自定义的事件名
             * @param callback 自定义事件的回调
             */
            //绑定总线事件
            this.$bus.$on('func', this.getData)
            //绑定总线事件(只能被触发一次)
            //this.$bus.$once('func', this.getData)
        }
    }
</script>

触发总线事件

<template>
    <div>
        <button @click="dataToParent">点击触发传入的function</button>
    </div>
</template>

<script>
    export default {
        name: "PropsDemo",
        props: ['func'],
        methods: {
            dataToParent(event){
                console.log(event)
                //触发总线事件
                /**
                 * @param event 自定义的事件名
                 * @param args 给事件function的参数
                 */
                this.$bus.$emit("func","子给父的数据")
            }
        },
        beforeDestroy() {
            /**
             * @param event 自定义的事件名
             */
            //解绑一个自定义事件
            this.$off('func')
            //解绑多个自定义事件
            // this.$off(['func'])
            //解绑所有的自定义事件
            // this.$off()
        }
    }
</script>