Vue组件之间的通信

对于vue来说，组件之间的通信是非常重要的，也是让人非常头痛的，下面我就总结一些常用的组件之间通信的方法。

1.props父组件向子组件发送消息

//父组件
<template>
  <div>
    <Btn :val="msg" index="静态"></Btn>
  </div>
</template>
<script>
import Btn from '../base/btn.vue';
export default {
  data(){
    return {
      msg:'动态'
    }
  },
  components:{Btn}
}
</script>
<style scoped
</style>

//子组件
<template>
  <div>
    <button>{{val}}+{{index}}</button>
  </div>
</template>
<script>
export default {
  props:['val','index'],
  data(){
    return {
    }
  }
}
</script>
<style scoped
</style>

在父组件中绑定属性，在子组件中通过props接收，即可实现父传子。动态绑定的属性(val)称为动态props，静态绑定的属性(index)，称之为静态props。这里的props我用的是数组的方式，其实props大有文章，我就不多做介绍。感兴趣的可以参考这篇文章https://www.cnblogs.com/exhuasted/p/7250452.html

2.$emit 自定事件，子组件向父组件发送消息

//父组件
<template>
    <div>
       <Child @test='recive'></Child>
       <p>{{data}}</p>
    </div>
</template>
<script>
import Child from '../components/child.vue';
export default {
    data(){
        return {
            data:''
        }
    },
    methods:{
        recive(val){
            this.data=val;
        }
    },
    components:{
        Child
    }
}
</script>
<style scoped>
</style>

//子组件
<template>
    <div>
        <button @click="hander">按钮</button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            msg:'我是发送到父组件的数据啊'
        }
    },
    methods:{
        hander(){
            this.$emit('test',this.msg);
        }
    },
    mounted(){
        this.$on('test',(val)=>{
            window.alert(val);
        })
    }
}
</script>
<style scoped>
</style>

这里看似是在父组件 中绑定的自定义事件 test 的处理句柄，然而事件 test 并不是在父组件上触发的，而是在子组件里触发的，只是通过 v-on 在父组件中监听。既然是子组件自己触发的，那它自己也可以监听到，这就要使用 $on 来监听实例上的事件，换言之，组件使用 $emit 在自己实例上触发事件，并用 $on 监听它。

3.中央事件总线，兄弟组件(跨级组件)之间的通信

（1）首先在src下新建bus.js（中央事件总线），作为数据传递的桥梁

//中央事件总线
import Vue from 'vue';

export default new Vue();

（2）然后在兄弟组件a通过$emit发送，在兄弟组件b中接收。

//兄弟组件a
<template>
    <div>
       <button @click="send"><slot></slot></button> 
    </div>
</template>
<script>
import Bus from '../bus.js';
export default {
    data(){
        return {
            info:'我是发送到兄弟组件b的数据'
        }
    },
    methods:{
        send(){
            Bus.$emit('data',this.info);
        }
    },
    beforeDestroy(){
        Bus.$off('data');
    }
}
</script>
<style scoped>
</style>

//兄弟组件b
<template>
    <div>
        <p>{{name}}</p>
    </div>
</template>
<script>
import Bus from '../bus.js';
export default {
    data(){
        return {
            name:""
        }
    },
    created(){
        Bus.$on('data',(val)=>{
            this.name=val
        })
    }
}
</script>
<style scoped> 
</style>

//父组件
<template>
    <div>
        <A>点击向兄弟组件发送数据</A>
        <B></B>
    </div>
</template>
<script>
import A from './a.vue';
import B from './b.vue';
export default {
    data(){
        return{
        }
    },
    components:{
        A,
        B
    }
}
</script>
<style scoped>
</style>

上面的例子讲的是兄弟组件之间的通信，当然，中央事件总线也可以解决跨级组件之间的通信，我们可以将bus封装为一个Vue的插件，可以在所有的组件间任意使用，而不需要导入bus。大家可以参考这篇文章https://www.jianshu.com/p/e95ee2d71bad

上述三种方法算是最基础的组件之间通信的方法，后面我将介绍provide，inject依赖注入，vuex状态管理等方法。

最后感谢我的监工！！