04 非父子组件传值

一、非父子组件传值
要点：
1、需要在全局vue的实例的原型上挂在一个新的vue实例
2、挂载完之后，就可以让所有的组件通过原型上的vue实例实现一个连接的桥梁
具体实现
1、发送数据者 使用原型上的vue实例的 $emit 自定义事件
2.、接受数据者 使用原型上的vue实例的 $on 监听
main.js中：

//单一事件管理 挂载到全局
Vue.prototype.Event=new Vue()

三个组件 a.vue b.vue c.vue index.vue
index.vue是a、b、c的父组件

a组件发送给兄弟b组件
a.vue

<template>
  <div class="box">
      <h3>this is A</h3>
      <p>a data:{{aData}}</p>
      <button @click="send">发送</button>
  </div>
</template>
<script>
export default {
    data(){
        return {
            aData:"a data"
        }
    },
    methods:{
        send(){
        // 通过全局的vue实例上的$emit('自定义事件',要发送的数据)
            this.Event.$emit("sendA",this.aData)
        }
    }
}
</script>

b.vue// 通过全局的vue实例上的$on(‘a组件的自定义事件’,(接受的值)=>{})

<template>
  <div class="vb">
    <h4>组件b</h4>
    <p>接受a的数据:{{a}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
        a:"",
        b:'B的数据'
    }
  },
  mounted(){
    //此处保存b组件的实例
    var that =this
    // 在接受的地方，通过Event的$on监听广播
    this.Event.$on('sendadate',function(data){
        // console.log(data);
        // console.log(this)//指的是Event实例 如果使用的是箭头函数 ，可以直接使用this
        that.a = data
    })
  },
}
</script>

c.vue接受a.vue的值
c.vue

<template>
  <div class="vc">
    <h4>组件c</h4>
    <p>接受a组件的值：{{a}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
        a:""
    }
  },
  mounted(){
      this.Event.$on("sendadate",(data)=>{
          this.a =data
      })
  }
}
</script>