vue 组件之间如何通信

组件之间如何通信，组件之间不同的关系，有不同的通信方式。

（1）公用通信方式 ：vuex

不论组件是什么关系，都可以使用vuex，vuex状态管理器，可以把共享公共的数据都存储在这里，里面也有改变数据的方法。

（2）父子组件通信方式： props/$emit 、$parent/$children 、provide/inject 

　　（a）props/$emit：父组件通过props给子组件传数据，子组件通过$emit(事件名，参数)给父组件传新数据

//父组件
<template>
　　<div>
    　　<child :message="mes" @postMessage="getMessage"></child>
    　　<div>{{mes}}</div>
　　</div>
</template>
export default{
    data(){
        mes:"第一次消息"
    },
    methods:{
        // 接受子组件发起的$emit事件，传来的新数据
        getMessage(val){
            this.mes = val
        }
    }
}

// 子组件
<template>
　　<div>
    　　<p>我是子组件,props中message的值：{{message}}</p>
    　　<button @click="change">改变props中的message</button> 
　　</div>
</template>
export default{
    props:["message"],
    methods:{
        change(){
            this.$emit("postMessage","第二次消息")
        }
    }
}

　　（b）$parent/$children：组件实例中有$parent、$children属性

 

 

 

　　（c）provide/inject：这个比较适合跨级的组件，比如祖父组件与孙组件（描述的好奇怪啊）这种。

//父（祖父）组件
export default {
    name: "App",
    data() {
        return {
          a: "123"
        };
      },
      provide() {
        return {
          a: this.a,
          b: "bb"
        };
      }
  }


  // 子组件
  export default{
      inject:['a','b'],
      created(){
          console.log(this.a,this.b) // 123 bb
      }
  }
  

 

（3）兄弟组件通信方式： bus

兄弟组件之间通信，通过创建一个新的vue实例，作为两者之间的桥梁，然后通过$emit 和 $on去触发接受事件。

ps：$on接受事件之后，记得在beforeDestory移除，即$off。

 

//首先创建一个文件BUS.js
import Vue from 'vue';
export default new Vue;

// 子组件A
<template>
  <div>
    <div>我是子组件A:{{num}}</div>
    <button @click="add">点击加1</button>
  </div>
</template>
import BUS from "../common/BUS.js";
export default{
    data(){
        return {
            num:0
        }
    },
    methods:{
        add(){
            this.num+=1
            BUS.$emit("getNum",this.num)
        }
    }
}

// 子组件B
<template>
  <div>
    <div>我是子组件:{{num}}</div>
  </div>
</template>
import BUS from "../common/BUS.js";
export default{
    data(){
        return {
            num:0
        }
    },
    created(){
        BUS.$on("getNum",val=>{
            this.num = val
        })
    },
    beforeDestroy() {
        // 记得移除
        BUS.$off("getNum")
    }
}

// 父组件
<templete>
    <div>
        <child-a></child-a>
        <child-b></child-b>
    </div>
</templete>