Vue组件通信方式详解（全面版）

在Vue应用开发中，组件通信是一个重要的话题。不同的组件可能需要在不同的情况下进行数据传递和交互。Vue提供了多种方式来实现组件通信，每种方式都有其适用的场景。本文将详细介绍Vue中实现组件通信的各种方式，并为每种方式提供通俗易懂的代码示例。

公众号：Code程序人生，个人网站：https://creatorblog.cn

Props

Props是父组件向子组件传递数据的一种方式。子组件通过在声明中指定props属性来接收父组件传递的数据。

<!-- ParentComponent.vue -->
<template><ChildComponent message="Hello from parent!" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},
};
</script><!-- ChildComponent.vue -->
<template><div>{{ message }}</div>
</template><script>
export default {props: ['message'],
};
</script>

自定义事件

子组件可以使用$emit触发一个自定义事件，父组件通过在子组件上使用v-on监听该事件并执行相应的方法。

<!-- ChildComponent.vue -->
<template><button @click="sendMessage">Send Message to Parent</button>
</template><script>
export default {methods: {sendMessage() {this.$emit('message-sent', 'Hello from child!');},},
};
</script><!-- ParentComponent.vue -->
<template><ChildComponent @message-sent="handleMessage" />
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},methods: {handleMessage(message) {console.log(message); // Output: "Hello from child!"},},
};
</script>

事件总线（Event Bus）

事件总线是一个空的Vue实例，可以用于在任何组件间发布和订阅事件。

<!-- EventBus.js -->
import Vue from 'vue';
export const eventBus = new Vue();<!-- FirstComponent.vue -->
<template><button @click="sendMessage">Send Message to SecondComponent</button>
</template><script>
import { eventBus } from './EventBus.js';export default {methods: {sendMessage() {eventBus.$emit('message-sent', 'Hello from first component!');},},
};
</script><!-- SecondComponent.vue -->
<template><div>{{ message }}</div>
</template><script>
import { eventBus } from './EventBus.js';export default {data() {return {message: '',};},created() {eventBus.$on('message-sent', (message) => {this.message = message;});},
};
</script>

Vuex

Vuex是Vue的状态管理库，用于在不同组件间共享状态。

<!-- store/index.js -->
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {message: '',},mutations: {updateMessage(state, message) {state.message = message;},},
});<!-- FirstComponent.vue -->
<template><button @click="updateMessage">Update Message in SecondComponent</button>
</template><script>
import { mapMutations } from 'vuex';export default {methods: {...mapMutations(['updateMessage']),updateMessage() {this.updateMessage('Hello from first component!');},},
};
</script><!-- SecondComponent.vue -->
<template><div>{{ message }}</div>
</template><script>
import { mapState } from 'vuex';export default {computed: {...mapState(['message']),},
};
</script>

$parent 和 $children

Vue提供了$parent和$children属性来访问父组件和子组件的实例。

<!-- ParentComponent.vue -->
<template><div><ChildComponent /></div>
</template><!-- ChildComponent.vue -->
<template><button @click="sendMessage">Send Message to Parent</button>
</template><script>
export default {methods: {sendMessage() {this.$parent.message = 'Hello from child!';},},
};
</script>

依赖注入

依赖注入是一种高级的通信方式，适用于祖先组件向后代组件传递数据，而不需要显式地通过props传递。

<!-- AncestorComponent.vue -->
<template><DescendantComponent />
</template><script>
import { provide } from 'vue';
import DescendantComponent from './DescendantComponent.vue';export default {components: {DescendantComponent,},setup() {provide('message', 'Hello from ancestor!');},
};
</script><!-- DescendantComponent.vue -->
<template><div>{{ message }}</div>
</template><script>
import { inject } from 'vue';export default {setup() {const message = inject('message');return {message,};},
};
</script>

$attrs 和 $listeners

$attrs 和 $listeners 允许将父组件中非 prop 特性和事件传递给子组件，用于更灵活的组件封装。

<!-- ParentComponent.vue -->
<template><ChildComponent title="Hello" @custom-event="handleEvent" />
</template><!-- ChildComponent.vue -->
<template><div><h1>{{ title }}</h1><button @click="$emit('custom-event', 'Custom Event')">Click</button></div>
</template><script>
export default {props: ['title'],
};
</script>

插槽（Slots）

插槽允许父组件向子组件传递内容，而不仅仅是数据。

<!-- ParentComponent.vue -->
<template><ChildComponent><p>Slot content from parent</p></ChildComponent>
</template><!-- ChildComponent.vue -->
<template><div><slot></slot></div>
</template>

$refs

$refs 允许父组件访问子组件的实例，从而进行直接通信。

<!-- ParentComponent.vue -->
<template><div><ChildComponent ref="childRef" /><button @click="sendMessageToChild">Send Message to Child</button></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},methods: {sendMessageToChild() {this.$refs.childRef.receiveMessage('Hello from parent!');},},
};
</script><!-- ChildComponent.vue -->
<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: '',};},methods: {receiveMessage(message) {this.message = message;},},
};
</script>

localStorage或sessionStorage

浏览器缓存在一定程序上也可以帮助我们实现组件通信，甚至跨页面、跨窗口通信，但是在Vue项目中有很多更优秀的通信方式，不是很建议使用localStorage或sessionStorage来实现。

// 在一个页面中存储数据
localStorage.setItem('message', 'Hello from localStorage');// 在另一个页面中获取数据
const message = localStorage.getItem('message');
console.log(message); // "Hello from localStorage"

总结

组件通信是我们日常开发中最常见的功能，可以这样说，有组件的地方就有组件通信的需求，而现在所有框架都朝着组件化、工程化的方向发展，所以组件通信是我们必须掌握的。

上述内容详细介绍了Vue中实现组件通信的多种方式，提供了基本的代码示例。它们有各自的使用场景，大家可以根据不同的场景和需求，选择合适的通信方式可以让你的Vue应用更加高效和可维护。