vue中组件通信方法有很多种，可以根据具体场景来选择具体使用哪种。比较常见的以下几种方法：
1、父组件向子组件传参
在父组件中向子组件传入普通字符串：
<Child message="hello vue"></Child>
在子组件中用props接受传进来的参数：
props: {
message: ''
}
完整代码：
// 父组件
<template>
<div id="example">
<Child message="hello vue"></Child>
</div>
</template>
<script type="text/javascript">
import Child from './Child';
export default {
components: {
Child
}
}
</script>
// 子组件
<template>
<div id="child">
<span>{{ message }}</span>
</div>
</template>
<script type="text/javascript">
export default {
props: {
message: ''
}
}
</script>
2、子组件向父组件传参
props传递参数时是单向的，这意味着我们不能通过props向父组件传递参数。我们可以在子组件中发送事件，在父组件中监听事件来实现子组件向父组件传参。
子组件使用emit发送事件：
this.$emit('listenFromChildData', 'this message is from child')
父组件监听事件：
<Child @listenFromChildData="childData"></Child>
完整代码：
// 父组件
<template>
<div id="example">
<span>{{text}}</span>
<Child @listenFromChildData="childData"></Child>
</div>
</template>
<script type="text/javascript">
import Child from './Child';
export default {
data: function() {
return {
text: ''
}
},
methods: {
childData(data) {
this.text = data
}
},
components: {
Child
}
}
</script>
// 子组件
<template>
<div>
<button @click="sendMsgToParent">向父组件传值</button>
</div>
</template>
<script type="text/javascript">
export default {
methods: {
sendMsgToParent() {
// 发送数据
this.$emit('listenFromChildData', 'this message is from child')
}
}
}
</script>
3、非父子组件通信
非父子组件之间通信时，简单的情况下，可以使用事件总线。
首先定义一个空的Vue实例作为事件总线：
let bus = new Vue()
在A组件中使用emit发送事件：
bus.$emit('event', data)
在B组件中使用on监听事件：
bus.$on('event', function (data) {
// todo ...
})
完整代码：
// 组件A
<template>
<div>
<span>组件A</span>
<button v-on:click="add"> {{text}} </button>
</div>
</template>
<script type="text/javascript">
import bus from '../bus.js'
export default {
data: function() {
return {
text: '发送数据',
data: ''
}
},
methods: {
add() {
bus.$emit('sendDataToB', 'this data from A')
}
}
}
</script>
// 组件B
<template>
<div>
<span>组件B</span>
<span>{{data}}</span>
</div>
</template>
<script type="text/javascript">
import bus from '../bus.js'
export default {
data: function() {
return {
data: ''
}
},
mounted() {
var self = this
bus.$on('sendDataToB', function (msg) {
self.data = msg
})
}
}
</script>
4、vuex
在复杂情况下，组件间通信可以使用vuex，vuex的官方文档
