vue是数据驱动视图更新的框架，所以对于vue来说组件间的数据通信非常重要。组件是vue的强大功能之一，而组件间的作用域是互相独立的，这就意味着组件间的数据无法互相引用，那么组件间如何通信便成为了重点知识。本文将分析不同组件间通信的各种方式。
prop/ $emit
父组件通过prop向子组件传递数据，而子组件通过$emit向父组件通信
//父组件
<template>
<Child :text=text @change="changeCurrentText"></Child>
</template>
<script>
import Child from './child.vue'
export default {
data(){
return{
text: 'sss'
}
},
components:{ Child },
methods: {
changeCurrentText(value){
this.text = value
}
}
}
</script>
//child.vue
<template>
<div @click="changeText">
{{text}}
</div>
</template>
<script>
export default {
props:{
text: {
type: String
}
},
methods:{
changeText(){
this.$emit('change','改变了')
}
}
}
</script>
父子组件之间的数据传递只能从父组件传向子组件，这正是vue的单向数据流设计理念。而prop在其中充当了数据传递的一个衔接口，在子组件中我们可以在props中定义接收子组件值的类型和默认值。
这种通信方式是父子通信最常用的，传值取值方便简洁明了，但是这种方式的缺点是：
- 由于数据是单向传递，如果子组件需要改变父组件的props值每次需要给子组件绑定对应的监听事件。
- 如果父组件需要给孙组件传值，需要子组件进行转发。
注：组件中的数据共有三种形式：data、props、computed
ref
ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，若注册了多个ref引用，同样都将会被注册在父组件的$refs对象上，如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。然后通过$refs可以获得你绑定的这个组件或者元素的一些相关信息，还可以修改子组件的值。
//父组件：
<template>
<div>
<Child ref="a" />
<input type="button" @click="fn">
</div>
</template>
<script>
import Child from "./Child"
export default{
methods:{
fn(){
this.$refs["a"].sun=10
console.log(this.$refs["a"].sun)//10
}
},
components:{
Child
},
mounted(){
console.log(this.$refs["a"].sun)//1
}
}
</script>
//子组件：
<template>
<div>
子组件
</div>
</template>
<script>
export default{
data(){
return{
sun:1
}
}
}
</script>
$attrs/ $listeners
多级组件嵌套时可使用
$attrs: 只代表没有被声明未props的属性，如果某个属性已存在于子组件的props中则$attrs会将该属性剔除，$attrs是组件标签上的静态属性值（attr）和动态属性值（：attr）的对象集合。
//父组件A
<template>
<B :name='name' :age='age'/>
</template>
import B from './B.vue'
export default {
data() {
return {
name:"小红",
age:"18"
}
},
components:{ B },
}
//子组件B
<template>
<div>
<div>{{name}}</div>
<div>{{$attrs.age}}</div>
//通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的)
<C v-bind="$attrs" v-on="$listeners"/>
</div>
</template>
import C from './C.vue'
export default {
props:["name"]
data() {
return { }
},
components:{ C },
}
//孙组件C
<template>
<div>age:{{$attrs.age}}</div>
</template>
<script>
export default {
}
</script>
$listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器，它可以通过 v-on=”$listeners” 传入内部组件。
//父组件A
<template>
<B :name='name' :age='age' v-on:testB="onB" v-on:testC="onC" />
</template>
import B from './B.vue'
export default {
data() {
return {
name:"小红",
age:"18"
}
},
components:{ B },
methods: {
//b组件传回来的数据
onB(msg) {
console.log('我是B：',msg);
},
// c组件传回来的数据
onC(msg) {
console.log('我是C：',msg);
}
}
}
//子组件B
<template>
<div>
<div>{{name}}</div>
//C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性
<C v-bind="$attrs" v-on="$listeners"/>
</div>
</template>
import C from './C.vue'
export default {
props:["name"]
data() {
return { }
},
components:{ C },
mounted() {
this.$emit('testB','BBBB');
}
}
//孙组件C
<template>
<div>age:{{$attrs.age}}</div>
</template>
<script>
export default {
mounted() {
this.$emit('testC','CCCC');
}
}
</script>
简单来说：$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。
provide/ inject
provide 和 inject 绑定并不是可响应的，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法，而在任何后代组件中，我们都可以使用 inject 来接收 provide 提供的数据或方法。
// 父组件
<template>
<div>
<div>{{foo}}</div>
<B/>
</div>
</template>
<script>
import B from "./B";
export default {
components: { B },
provide() {
return {
foo: this.foo
};
},
data() {
return {
foo: "父组件",
};
}，
mounted() {
console.log(this.foo)
},
};
</script>
//子级组件
<template>
<C/>
</template>
<script>
import C from "./C";
export default {
components: { C },
};
</script>
//孙级组件，接收foo
<template>
<div>{{foo}}</div>
</template>
<script>
export default {
inject: ["foo"],
mounted() {
console.log(this.foo)
},
};
</script>
将数据变成可响应式的解决方案是把provide所在的Vue实例给传递下去，再来改造一下
provide() {
return {
foo: this.foo
};
},
data() {
return {
foo: {
foo: "父组件"
}
在这种情况下如果在孙组件改变inject中foo的值，也会响应的更新到父组件中，当然为了保护单向数据流机制，最佳实践还是不要在子组件里更改inject。
在进行组件库开发时provide/inject是一个不错的选择，但是当多个后代组件同时依赖同一个父组件提供数据时，只要任一组件对数据进行了修改，所有依赖的组件都会受到影响，实际上是增加了耦合度；任意层级访问使数据追踪变的比较困难，你并不能准确的定位到是哪一个层级对数据进行了改变，当数据出现问题时，尤其是多人协作时，可能会大大增加问题定位的损耗。
EventBus
EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件
const eventBus = new Vue();
eventBus.$emit(eventName, […args]) //发布事件
eventBus.$on(event, callback) //订阅事件
//实例如下：
// eventBus.js
import Vue from 'vue'
export const eventBus = new Vue();
//另外一种方式，可以直接在项目中的 main.js 初始化 EventBus（这种方式初始化的EventBus是一个全局的事件总线） :
Vue.prototype.$EventBus = new Vue()
//a.vue发送事件
<template>
<button @click="sendMsg()">-</button>
</template>
<script>
import { EventBus } from "../event-bus.js";
export default {
methods: {
sendMsg() {
EventBus.$emit("aMsg", '来自A页面的消息');
}
}
};
</script>
//b.vue接收事件
<template>
<p>{{msg}}</p>
</template>
<script>
import {
EventBus
} from "../event-bus.js";
export default {
data(){
return {
msg: ''
}
},
mounted() {
EventBus.$on("aMsg", (msg) => {
// A发送来的消息
this.msg = msg;
});
}
};
</script>
vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除；如果是业务有反复操作的页面，EventBus在监听的时候就会触发很多次，所以通常在vue页面销毁时，同时移除EventBus事件监听。
//移除事件监听
import {
eventBus
} from './event-bus.js'
EventBus.$off('aMsg', {})
也可以使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听
全局EventBus的工作原理是发布/订阅方法，通常称为 Pub/Sub 。
//创建全局EventBus
var EventBus = new Vue();
Object.defineProperties(Vue.prototype, {
$bus: {
get: function () {
return EventBus
}
}
})
在这个特定的总线中使用两个方法$on和$emit。一个用于创建发出的事件，它就是$emit；另一个用于订阅$on：
var EventBus = new Vue();
this.$bus.$emit('nameOfEvent', { ... pass some event data ...});
this.$bus.$on('nameOfEvent',($event) => {
// ...
})
然后我们可以在某个Vue页面使用this.$bus.$emit("sendMsg", 'emit....');，另一个Vue页面使用
this.$bus.$on('updateMessage', function(value) {
console.log(value); // emit....
})
同时也可以使用this.$bus.$off('sendMsg')来移除事件监听。
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
