在Vue中，组件通信有以下几种方式：
Props / $emit：父组件通过给子组件传递props属性，子组件通过$emit事件将数据传递给父组件。适用于父组件向子组件传递数据。
自定义事件：父组件通过$on监听子组件触发的事件，子组件通过$emit触发事件。适用于子组件向父组件传递数据或触发某些操作。
$refs：父组件通过ref属性获取子组件的实例，从而调用子组件的方法或获取子组件的数据。
$parent / $children：通过$parent属性获取父组件实例，通过$children属性获取子组件实例。可以直接访问父组件或子组件的数据和方法。
Event Bus：通过创建一个全局的Vue实例，并使用$on、$emit等方法进行事件的监听和触发。不限制组件之间的层级关系，适用于任意组件之间的通信。
Vuex：Vue的状态管理库，用于管理多个组件共享的状态数据。通过定义store、state、mutations等概念，实现组件之间的数据共享与通信。
适用场景：
- Props / $emit：父子组件之间的数据传递。
- 自定义事件：兄弟组件之间的数据传递或触发操作。
- $refs：父组件获取子组件的数据或调用子组件的方法。
- $parent / $children：父子组件之间的数据传递或方法调用。
- Event Bus：任意组件之间的通信。
- Vuex：大型应用中，多个组件需要共享数据的情况。
在Vue中，组件通信可以通过props、$emit、$on和$emit等方式来实现。
- 父组件向子组件传递数据：使用props 父组件可以通过props属性将数据传递给子组件。子组件可以在props中定义接收的属性，然后通过子组件的模板中使用这些属性。
// 父组件
<template>
<child-component :message="parentMsg"></child-component>
</template>
<script>
export default {
data() {
return {
parentMsg: 'Hello from parent'
}
}
}
</script>
// 子组件
<template>
<div>{
{ message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>
- 子组件向父组件传递数据：使用$emit 子组件可以使用$emit方法触发一个自定义事件，并传递数据给父组件。父组件可以在模板中监听这个自定义事件，并处理传递的数据。
// 子组件
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message', 'Hello from child')
}
}
}
</script>
// 父组件
<template>
<child-component @message="handleMessage"></child-component>
</template>
<script>
export default {
methods: {
handleMessage(msg) {
console.log(msg) // 输出：Hello from child
}
}
}
</script>
- 兄弟组件之间传递数据：使用事件总线 可以创建一个Vue实例作为事件总线，兄弟组件通过事件总线来通信。
// EventBus.js
import Vue from 'vue'
export default new Vue()
// 组件A
<template>
<div>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script>
import EventBus from './EventBus'
export default {
methods: {
sendMessage() {
EventBus.$emit('message', 'Hello from component A')
}
}
}
</script>
// 组件B
<template>
<div>
<div>{
{ message }}</div>
</div>
</template>
<script>
import EventBus from './EventBus'
export default {
data() {
return {
message: ''
}
},
created() {
EventBus.$on('message', (msg) => {
this.message = msg
})
}
}
</script>
这里仅展示了Vue中几种常用的组件通信方式和应用场景的代码示例，实际应用中还可以根据具体需求选择合适的通信方式。
