中央事件总线

实现跨组件的事件通信
实际上就是一个空的vue实例
前提是组件存在
一定要保证接受事件统一

它就像一个公交车一样，来回输送人，将组件A输送到组件B，再将组件B输送到组件A； 这里A，B组件可以是父、子组件，也可以是兄、弟组件，或者两个没有任何关系的组件；

/1.创建中央事件总线，这里在全局中定义
var Bus = new Vue();
//2.使用Bus中央事件总线在A组件中发送信息
Bus.$emit('自定义事件名'，'$on发送过来的数据')；
//3.使用Bus中央事件总线在B组件中接收信息,接收的事件在created钩子函数中可以进行获取
Bus.$on('自定义事件名'，function(msg){
  //这里的msg就是发过来的数据,在这里接收
  console.log(msg)
})；

  <div id="app">
        <login></login>
        <register></register>
    </div>
    <template id="login">
       <div>
        <h1>这是login组件</h1>
        <button @click="handleClick">点击传递数据</button>
       </div>
    </template>
    <template id="register">
       <div>
        <h1>这是register组件</h1>
        <p>{{name}}</p>
       </div>
    </template>
    <script src="./js/vue.js"></script>
    <script>
        //全局中定义
           const Bus=new Vue()
        Vue.component("login",
            {
                template: "#login",
                data() {
                    return {
                        msg: "login中的数据"
                    }
                },
                methods:{
                    handleClick(){ 
                        Bus.$emit("dataclick",this.msg)
                    }
                }
            })
        Vue.component("register",
            {
                template: "#register",
                data(){
                    return{
                     name:""
                    }
                },
                created () {
                    Bus.$on("dataclick",(item)=>{
                      this.name=item
                    })
                }
            })
        const vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
            },
        })
    </script>