Vue 中 vue 组件的通信（父子组件和非父子组件）？

Vue 中组件之间的通信可以通过多种方式实现，包括父子组件通信和非父子组件通信。

父子组件通信

1. Props/属性传递：父组件通过 props 向子组件传递数据。

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

2. Events/事件触发：子组件通过触发事件向父组件传递信息。

   <!-- ChildComponent.vue -->
   <template>
     <button @click="sendMessage">Send Message</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 {
     methods: {
       handleMessage(message) {
         console.log(message); // 'Hello from child!'
       },
     },
     components: {
       ChildComponent,
     },
   };
   </script>
   

非父子组件通信

1. Event Bus/事件总线：创建一个事件总线来在不同组件之间传递事件。

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

   使用：

   // SenderComponent.vue
   <script>
   import { EventBus } from './event-bus.js';
   
   export default {
     methods: {
       sendMessage() {
         EventBus.emit('message-received', 'Hello from sender!');
       },
     },
   };
   </script>
   
   // ReceiverComponent.vue
   <script>
   import { EventBus } from './event-bus.js';
   
   export default {
     created() {
       EventBus.on('message-received', message => {
         console.log(message); // 'Hello from sender!'
       });
     },
   };
   </script>
   

2. Vuex：用于管理应用程序的状态，并在任何组件之间共享数据。

   // store.js
   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   export default new Vuex.Store({
     state: {
       message: 'Hello from Vuex!',
     },
     mutations: {
       updateMessage(state, newMessage) {
         state.message = newMessage;
       },
     },
   });
   

   使用：

   // SenderComponent.vue
   <script>
   export default {
     methods: {
       sendMessage() {
         this.store.commit('updateMessage', 'Hello from sender!');
       },
     },
   };
   </script>
   
   // ReceiverComponent.vue
   <script>
   export default {
     computed: {
       message() {
         return this.store.state.message;
       },
     },
   };
   </script>
   

这些是在 Vue 中实现父子组件和非父子组件通信的常见方法，选择适合你应用程序结构和需求的方法。