组件之间的通讯：兄弟组件之间的相互通讯,以及父子之间的通信（中央事件总线）

组件之间的通讯：

父->子:通过props,data属性，

子->父：通过派发事件

兄弟组件：中央事件总线（......data{ Bus:new Vue()}.....）

更为复杂的通讯：就是用vuex

关于兄弟组件之间的通讯官档上推荐使用中央事件总线，我们也确实是这样做的，

中央事件总线，其实就是在父组件data中在实例化话一个vue实例，用于管理组件之间的通讯

假设我们有一个组件A,和B,他们之间的要进行数据通讯，那么他们之间肯定要建立某种联系，这个联系人就是父组件，联系地址就是中央事件总线

然后A,$emit一个信息，B就$on监听这个信息

直接上上例子：

首先先建立一个父组件：

    const myVue=new Vue({
        el:'#app',
        data:{
            Bus:new Vue(),//中央事件总线
        },
        components:{
            myF1:c1,//子组件c1
            myF2:c2//子组件c2
        }
    });

给出子组件的代码：

    const c1={
        template:`<div>
            <p>this is c1 组件</p>
            <span></span>
            </div>`,
        created(){//组件的钩子函数
          this.$root.Bus.$on('你的名字',value=>{
              this.add(value);
          });
        },
        methods:{
            add(value){
                console.log(value+100);
            }
        },
        beforeDestory(){//组件的钩子函数
            this.$root.Bus.$off("你的名字");
        }
    };

    const c2={
        template:`
            <div>
             <p>this is c2 组件</p>
             <p >
                <button @click="submit">改变</button>
            </p>
             <span></span>
           </div>`,
        methods:{
            submit(){
              //  this.$root.Bus.$emit('eventName',123);
                this.$parent.Bus.$emit('你的名字',123);
            },
        },
    };

组件B，，通过父组件的中央事件总线，$emit派发一个事件"你的名字",以及传递一个参数，兄弟组件A,通过父组件的中央事件总线$on，监听那个派发的事件，并接受那个参数。

没任何问题。。。。。。

给出代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件之间的通信(中央事件总线)</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">

        <my-f1></my-f1>
        <my-f2></my-f2>
    </div>
</body>
</html>
<script>
    const c1={
        template:`<div>
            <p>this is c1 组件</p>
            <span></span>
            </div>`,
        created(){
          this.$parent.Bus.$on('你的名字',value=>{
              this.print(value);
          });
        },
        methods:{
            print(value){
                console.log(value);
            }
        },
        beforeDestory(){
            //this.$root.Bus.$off("你的名字");
            this.$parent.Bus.$off("你的名字");   //值得说一句的是，这个$root就是$parent ，建议还是写成$parent 
        }
    };

    const c2={
        template:`
            <div>
             <p>this is c2 组件</p>
             <p >
                <button @click="submit">改变</button>
            </p>
             <span></span>
           </div>`,
        methods:{
            submit(){
              //  this.$root.Bus.$emit('eventName',123);
                this.$parent.Bus.$emit('你的名字',123);
            },
        },
    };
    const myVue=new Vue({
        el:'#app',
        data:{
            Bus:new Vue(),
        },
        components:{
            myF1:c1,
            myF2:c2
        }
    });
</script>

以上的例子存在一个问题就是，假如子组件被多个组件调用，那么 this.$parent.Bus.$emit('你的名字',123);这句话可能会报错

尤其是在一个较复杂的项目中组件是会被进程的引用。

这时候我们可以在main.js中进行

Vue.prototype.bus = new Vue();
每一次使用时候只需要
this.bus.$emit("....",'.....');

一般来，中央事件总线使用来兄弟组件之间的相互通信，其实也可用于父子组件的相互通信

子组件：ratingselect.vue

 toggleContent(event){
          if(!event._constructed){
              return ;
          }
          this.onlyContent=!this.onlyContent;
          this.bus.$emit('content.toggle',this.onlyContent);
      }

父组件：good.vue

  created(){
      this.bus.$on('content.toggle',(e)=>{
          console.log(e);
      });
    },

父子组件之间的更好通信方式：纯粹的事件派发

子组件：

this.$emit('modalIsShow', this.showModal)

调用子组件的父组件：

<selfModal ref="forgetPwdModal" v-on:modalIsShow="modalIsShowLoan">

modalIsShowLoan () {
　　console.log("派发事件给父组件啦")

怎么在父组件中获悉子组件的生命周期函数：

下面的代码就是在父组件中申明子组件的created函数

<template>
  <child @hook:created="handelChildCreated"></child>
</template>

methods: {
 handelChildCreated () {
    console.log('this is childCreated')
 }
}