【Vue3知识】组件间通信的方式

概述

在 Vue 3 中，组件间通信是一个常见且重要的需求。Vue 3 提供了多种方式来实现组件间的通信，根据组件的关系（父子组件、兄弟组件、跨层级组件等）和具体需求，可以选择不同的通信方式。以下是一些常用的组件间通信方法：

1. 父子组件通信

父组件向子组件传递数据（Props）

• 使用 props：父组件通过 props 向子组件传递数据。

• 示例：

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

  <!-- ChildComponent.vue -->
  <template>
    <div>{
      { message }}</div>
  </template>
  
  <script>
  export default {
    props: {
      message: {
        type: String,
        required: true,
      },
    },
  };
  </script>
  

子组件向父组件发送事件（自定义事件）

• 使用 $emit：子组件通过 $emit 触发事件，父组件监听该事件并处理。

• 示例：

  <!-- ParentComponent.vue -->
  <template>
    <ChildComponent @update="handleUpdate" />
  </template>
  
  <script>
  import ChildComponent from './ChildComponent.vue';
  
  export default {
    components: { ChildComponent },
    methods: {
      handleUpdate(newMessage) {
        console.log('Received from child:', newMessage);
      },
    },
  };
  </script>
  

  <!-- ChildComponent.vue -->
  <template>
    <button @click="sendMessage">Send Message</button>
  </template>
  
  <script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('update', 'Hello from Child');
      },
    },
  };
  </script>
  

2. 兄弟组件通信

兄弟组件之间没有直接的通信机制，通常通过共同的父组件或状态管理工具实现。

通过父组件中转

• 父组件作为中介：兄弟组件通过父组件传递数据或事件。

• 示例：

  <!-- ParentComponent.vue -->
  <template>
    <SiblingOne @send-to-sibling="handleSiblingOneMessage" />
    <SiblingTwo :message="siblingTwoMessage" />
  </template>
  
  <script>
  import SiblingOne from './SiblingOne.vue';
  import SiblingTwo