Vue中组件自定义事件与全局事件总线（GlobalEventBus）

1、组件的自定义事件用于子组件向父组件传值
使用方法（一）通过组件标签v-on:(@)绑定

**父组件内容**
<template>
    <div id="app">
        <!--    自定义事件-->
        <Nation 
        :acceptNationData="acceptNationData" 
        @toMeData="demo" 
        ref="nation"/>
        <Leader/>
        <Neumorphism/>
    </div>
</template>
其中@toMeData="demo"中toMeData是自定义事件名称，demo是父组件用来接收子组件数据的回调函数。

<script>
import Neumorphism from "./components/Neumorphism.vue"
import Nation from "./components/Nation";
import Leader from "./components/Leader";
export default {
    name: "App",
    components: {

        Neumorphism,
        Nation,
        Leader
    },
    methods: {
        //接收子組件數據
        acceptNationData(nation) {
            console.log(`函数传值`, nation)
        },
        //组件自定义事件传值（写法一）
        demo(nation) {
            console.log(`自定义事件传值`, nation)
        }
    },

子组件中的使用（通过$emit(‘自定义事件名称’,传递的数据)）

 <button @click="sendDataToApp">把數據給父組件App</button>

<script>
export default {
    name: "Nation",
    props:['acceptNationData'],
    data(){
        return {
            nationList:[
                {name:'中華民國',birth:'1912.1.1',founder:'孫中山'},
                {name:'大韓民國',birth:'1948.8.15',founder: '李承晚'},
                {name:'柬埔寨',birth:'1953.11.9',founder: '西哈努克親王'}
            ]
        }
    },
    methods:{
        sendDataToApp(){
            //父组件传给子组件函数，子组件通过props并调用
            this.acceptNationData(this.nationList)
            //组件自定义事件传值
            this.$emit('toMeData',this.nationList)
            //组件自定义事件传值
            this.$emit('ljq',this.nationList)
        },

        //自定义事件解绑
        unbind(){
            //解绑一个自定义事件
            // this.$off('toMeData')
            //解绑多个自定义事件（数组形式）
            // this.$off(['toMeData','ljq'])
            //解绑所有自定义事件
            this.$off()
        },
        //销毁组件实例
        death(){
            this.$destroy()//销毁后组件实例，自定义事件亦销毁
        },

使用方法（二）
通过定义ref获取对应的子组件，再使用$on方法绑定自定义事件，回调函数可以用methods里面的定义好的，也可以用箭头函数。（注意不能直接写普通函数，this指向问题）

注意：组件实例对象vc自身没有$emit()等方法，用的是vue实例对象vm上的方法。也就是说子组件实例身上绑定了自定义事件，通过找到vc再找到vm就可以使用这些方法。

2、全局事件总线（GlobalEventBus）用于任意组件间传值

1. 安装全局事件总线：

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')

2、使用全局事件总线：
①接受数据的组件：

 mounted() {
        //注册了一个自定义事件
        this.$bus.$on('hello',data=>{
            console.log('我是leader组件',data)
        })
    }

②发送数据的组件：

  //全局事件总线传值给兄弟组件（发射事件带着数据）
        sendToLeader(){
            console.log(this)
            console.log(this.$bus)
            this.$bus.$emit('hello',this.nationList[0])
        }

3、最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件