Vue 组件之间的通信方式详解

玉水

在 Vue.js 中，组件是构建应用程序的基本单位。然而，当你的应用程序变得复杂时，组件之间的通信变得至关重要。本文将介绍几种 Vue 组件之间通信的方式，帮助你更好地管理和组织代码。

父子组件通信

父组件可以通过

1. props

复制代码

向子组件传递数据，子组件则可以通过

1. $emit

复制代码

向父组件发送事件。
通过

1. props

复制代码

传递数据
父组件通过

1. props

复制代码

向子组件传递数据：

1. <!-- 父组件 -->
   
2. <template>
   
3.   <div>
   
4.     <child-component :message="parentMessage"></child-component>
   
5.   </div>
   
6. </template>
   
7. <script>
   
8. import ChildComponent from './ChildComponent.vue';
   
9. export default {
   
10.   components: {
    
11.     ChildComponent
    
12.   },
    
13.   data() {
    
14.     return {
    
15.       parentMessage: 'Hello from Parent!'
    
16.     };
    
17.   }
    
18. };
    
19. </script>

复制代码

子组件通过

1. props

复制代码

接收数据：

1. <!-- 子组件 -->
   
2. <template>
   
3.   <div>
   
4.     <p>{{ message }}</p>
   
5.   </div>
   
6. </template>
   
7. <script>
   
8. export default {
   
9.   props: ['message']
   
10. };
    
11. </script>

复制代码

通过

1. $emit

复制代码

发送事件
子组件通过

1. $emit

复制代码

向父组件发送事件：

1. <!-- 子组件 -->
   
2. <template>
   
3.   <div>
   
4.     <button @click="sendMessage">Send Message</button>
   
5.   </div>
   
6. </template>
   
7. <script>
   
8. export default {
   
9.   methods: {
   
10.     sendMessage() {
    
11.       this.$emit('message-sent', 'Hello from Child!');
    
12.     }
    
13.   }
    
14. };
    
15. </script>

复制代码

父组件监听子组件的事件：

1. <!-- 父组件 -->
   
2. <template>
   
3.   <div>
   
4.     <child-component @message-sent="handleMessage"></child-component>
   
5.   </div>
   
6. </template>
   
7. <script>
   
8. import ChildComponent from './ChildComponent.vue';
   
9. export default {
   
10.   components: {
    
11.     ChildComponent
    
12.   },
    
13.   methods: {
    
14.     handleMessage(message) {
    
15.       console.log(message);  // 输出 'Hello from Child!'
    
16.     }
    
17.   }
    
18. };
    
19. </script>

复制代码

兄弟组件通信

兄弟组件之间通常通过事件总线（Event Bus）或 Vuex 状态管理来实现通信。

使用事件总线

创建一个事件总线：

1. // event-bus.js
   
2. import Vue from 'vue';
   
3. export const EventBus = new Vue();

复制代码

在兄弟组件中使用事件总线：

1. <!-- 组件 A -->
   
2. <template>
   
3.   <div>
   
4.     <button @click="sendMessage">Send Message</button>
   
5.   </div>
   
6. </template>
   
7. <script>
   
8. import { EventBus } from './event-bus.js';
   
9. export default {
   
10.   methods: {
    
11.     sendMessage() {
    
12.       EventBus.$emit('message-sent', 'Hello from Component A!');
    
13.     }
    
14.   }
    
15. };
    
16. </script>
    
17. <!-- 组件 B -->
    
18. <template>
    
19.   <div>
    
20.     <p>{{ message }}</p>
    
21.   </div>
    
22. </template>
    
23. <script>
    
24. import { EventBus } from './event-bus.js';
    
25. export default {
    
26.   data() {
    
27.     return {
    
28.       message: ''
    
29.     };
    
30.   },
    
31.   created() {
    
32.     EventBus.$on('message-sent', (message) => {
    
33.       this.message = message;
    
34.     });
    
35.   }
    
36. };
    
37. </script>

复制代码

使用 Vuex

使用 Vuex 是管理应用程序状态的最佳实践。首先安装并配置 Vuex：

1. // store.js
   
2. import Vue from 'vue';
   
3. import Vuex from 'vuex';
   
4. Vue.use(Vuex);
   
5. export default new Vuex.Store({
   
6.   state: {
   
7.     message: ''
   
8.   },
   
9.   mutations: {
   
10.     setMessage(state, message) {
    
11.       state.message = message;
    
12.     }
    
13.   },
    
14.   actions: {
    
15.     updateMessage({ commit }, message) {
    
16.       commit('setMessage', message);
    
17.     }
    
18.   }
    
19. });

复制代码

在组件中使用 Vuex：

1. <!-- 组件 A -->
   
2. <template>
   
3.   <div>
   
4.     <button @click="sendMessage">Send Message</button>
   
5.   </div>
   
6. </template>
   
7. <script>
   
8. export default {
   
9.   methods: {
   
10.     sendMessage() {
    
11.       this.$store.dispatch('updateMessage', 'Hello from Component A!');
    
12.     }
    
13.   }
    
14. };
    
15. </script>
    
16. <!-- 组件 B -->
    
17. <template>
    
18.   <div>
    
19.     <p>{{ message }}</p>
    
20.   </div>
    
21. </template>
    
22. <script>
    
23. export default {
    
24.   computed: {
    
25.     message() {
    
26.       return this.$store.state.message;
    
27.     }
    
28.   }
    
29. };
    
30. </script>

复制代码

父子组件通信与兄弟组件通信总结

理解 Vue 组件之间的通信是开发复杂应用程序的关键。通过

1. props

复制代码

和

1. $emit

复制代码

进行父子组件通信，以及使用事件总线或 Vuex 进行兄弟组件通信，你可以更有效地管理和组织代码。
到此这篇关于Vue 组件之间的通信的文章就介绍到这了,更多相关Vue 组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/322394aw9.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！