vue3 组件通信方式 具体代码实现

在 Vue 3 中，组件之间的通信可以通过多种方式实现，以下是一些常用的方法和相应的代码示例：

1. Props: 父组件通过属性传递数据给子组件。
- 父组件中：

   <template>
     <child-component :message="parentMessage"></child-component>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         parentMessage: 'Hello from parent'
       };
     }
   }
   </script>

- 子组件中：

   <template>
     <div>{{ message }}</div>
   </template>
   
   <script>
   export default {
     props: {
       message: {
         type: String,
         required: true
       }
     }
   }
   </script>

2. Emit 事件: 子组件通过触发自定义事件向父组件发送消息。
- 子组件中：

   <template>
     <button @click="sendMessage">Send Message</button>
   </template>
   
   <script>
   export default {
     methods: {
       sendMessage() {
         this.$emit('message-sent', 'Hello from child');
       }
     }
   }
   </script>

- 父组件中：

   <template>
     <child-component @message-sent="handleMessage"></child-component>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     methods: {
       handleMessage(message) {
         console.log(message); // 输出：Hello from child
       }
     }
   }
   </script>

3. Provide/Inject: 祖先组件通过 provide 向所有后代组件注入数据，后代组件通过 inject 来使用这些数据。
- 祖先组件中：

   <template>
     <child-component></child-component>
   </template>
   
   <script>
   import ChildComponent from './ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     provide() {
       return {
         message: 'Hello from ancestor'
       };
     }
   }
   </script>

- 后代组件中：

   <template>
     <div>{{ injectedMessage }}</div>
   </template>
   
   <script>
   export default {
     inject: ['message'],
     computed: {
       injectedMessage() {
         return this.message;
       }
     }
   }
   </script>

这些是 Vue 3 中常用的组件间通信方式的代码实现示例。根据具体的需求和场景，你可以选择适合的方式来实现组件通信。