整理一下vue组件之间怎么通信，大概可以分为
- 父子组件怎么通信
- 其他组件之间怎么通信
一、父子组件之间的通信
1、父组件通过props向自组件传递参数，子组件在props里获取所需的值，然后使用
自组件通过$emit()方法，向父组件传递事件和参数。
这就形成了props向下单向传递，事件向上单向传递。
还有一种情况就是：
父组件用provide向子组件传递信息
子组件，子子组件都可以用inject来获取到数据
2、provide 和inject
二、其他组件之间通信
1、通过路由里的传递参数：
query，state都可以传递参数
2、通过localStorage，sessionStorage等前端持久化的数据存储方式传递参数
3、通过vuex来传递参数
4、通过eventBus来传递参数。（小项目少页面时使用）
声明一个bus.js文件
可以使用 $emit， $on， $once，$off 分别来分发、监听、取消监听事件：
//bus.js
import Vue from 'vue'
export default new Vue()
A组件：
<template>
<div>
A组件:
<span>{{elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug，来做为中间传达的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
B组件
<template>
<div>
B组件:
<input type="button" value="点击触发" @click="getData">
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
// 清除事件监听
beforeDestroy () {
Bus.$off('val')
},
mounted: function () {
var vm = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>
5、传到服务器，新组件从服务端获取
6、变量挂载到window，vue上，然后在上面获取（只限单页）
