Vue3兄弟组件传值（同级别组件传值Vue3）

快来打我* 2024-04-22 22:30 100阅读 0赞

#### **简介：** ####

1.  #### Vue3兄弟组件传值，我们可以使用"Mitt"插件来实现。通过使用事件总线的方式，我们可以将数据从一个组件传递给另一个组件，实现兄弟组件之间的通信。 ####
2.  #### **利用 Vue 3 自身的provide 和 inject 响应式 API 来实现兄弟组件之间的数据共享和通信。这里来给大家介绍下vue3中，兄弟组件传值的两种方式。** ####

####  ####

#### **一****、在 Vue 3 中，我们可以使用 `setup()` 函数和** `provide` 和 `inject` **响应式 API 来实现兄弟组件之间的数据共享和通信。这里我们不使用任何外部库，仅利用 Vue 3 自身的功能**。 ####

#### **1、首先，我们创建一个提供共享数据的组件（ProviderComponent.vue），它将使用 `provide` 函数来提供数据：** ####

#### **组件1：****ProviderComponent.vue** ####

<template>
      <div>
        <p>Shared Data: {
       { sharedData }}</p>
        <slot></slot>
        //注意这里的插槽，用于存放兄弟组件
      </div>
    </template>  
      
    <script setup>  
    import { ref, provide } from 'vue';
    const sharedData = ref('测试数据');
    provide('sharedData', sharedData);
    
    </script>

#### **2、然后，我们创建两个兄弟组件（`SiblingA.vue` 和 `SiblingB.vue`），它们都将通过 `inject` 来接收提供的数据，并且可以进行修改：** ####

#### **组件2：`SiblingA.vue`** ####

<template>
      <div>
        <p>组件 A</p>
        <p>{
       { sharedData }}</p>
        <button @click="increaseData">点击触发</button>
      </div>
    </template>  
      
    <script setup>  
    import { inject } from 'vue';
    // 使用 inject 函数接收提供的数据
    const sharedData = inject('sharedData');
    const increaseData = () => {
      sharedData.value = "更改后的数据";
    }
    
    </script>

#### **组件3：`SiblingA.vue`** ####

<template>
      <div>
        <p>组件 B</p>
        <p>Shared Data from Provider: {
       { sharedData }}</p>
      </div>
    </template>  
      
    <script setup>  
    import { inject } from 'vue';
    // 使用 inject 函数接收提供的数据  
    const sharedData = inject('sharedData');
    
    </script>

#### **3、最后，我们在父组件ParentComponent.vue中使用 `ProviderComponent` 和两个兄弟组件：** ####

#### **组件4：ParentComponent.vue** ####

<template>  
      <div>  
        <ProviderComponent>  
          <SiblingA />  
          <SiblingB />  
        </ProviderComponent>  
      </div>  
    </template>  
      
    <script setup>  
    import ProviderComponent from './ProviderComponent.vue';  
    import SiblingA from './SiblingA.vue';  
    import SiblingB from './SiblingB.vue';  
    
    </script>

#### **4、注意这里一共需要用到4个组件：** ####

*  **共享数据的组件： ProviderComponent.vue**
 *  **`兄弟组件1： SiblingA.vue`**
 *  **`兄弟组件2： SiblingB.vue`**
 *  **`父组件： ParentComponent.vue`**

#### **看下效果：** ####

![15684f62252c4dfc91617a44fe652d79.gif][]

#### **可以看到兄弟组件，通过中间件的方式，传值成功。** ####

#### **小结：** ####

*  #### **在这实例中，`ProviderComponent`共享组件 提供了 `sharedData`数据，并通过provide函数传递数据，而 `SiblingA` 和 `SiblingB` 都使用inject函数注入了这个数据。** ####
 *  #### **当 `SiblingA` 中的按钮被点击时，它会增加共享组件 `sharedData` 的值，这个变化也会反映到 `SiblingB` 中，因为它们是同一个响应式引用的不同视图。** ####
 *  #### **这就是使用 Vue 3 的 `provide` 和 `inject` API，以及 `setup()` 函数和 `ref` 来实现兄弟组件之间通信的一种方式。这种方法避免了使用全局状态管理库，并且保持了组件之间的解耦。** ####

#### **二、上面使用Vue 3 自身的AP实现了兄弟组件传值，这里我们可以使用 Vue3 的 `setup` 语法糖结合第三方库 `mitt` 来实现。**`mitt`是一个小巧且快速的TypeScript实现的EventEmitter 3封装库，专门用于Vue 3应用中的组件通信。在Vue 2.x中，通常使用`EventBus`进行组件间的通信，但在Vue 3.x中，推荐使用`mitt`作为替代方案。 ####

#### **1、**首先，确保已经安装好mitt库，安装命令如下； ####

npm install mitt
    //或者
    npm install mitt --save

####  ####

#### **2、创建事件总线。在项目中创建一个单独的js文件，例如`eventBus.js`，用于初始化并暴露 mitt 实例作为全局事件总线：** ####

import mitt from 'mitt';
    
    const bus = mitt();
    
    export default bus;

####  ####

#### 3、**兄弟组件通信实现。**创建兄弟组件，假设我们有两个兄弟组件A和B，组件A需要向组件B传递数据。在组件A中，通过导入事件总线，并在setup函数中发布事件： ####

// ComponentA.vue
    <template>
      
      <button @click="choseBusSetData">发送数据给兄弟组件</button>
    </template>
    
    <script setup>
    import { ref } from 'vue';
    import bus from '@/utils/eventBus.js'; // 引入事件总线
    const dataToEmit = ref('Hello, Brother!');
    function choseBusSetData() {
      bus.emit('brotherEvent', dataToEmit.value) // 发布事件并附带数据
    }
    </script>

#### **4、接着，在组件B中，同样引入事件总线并在setup函数中订阅该事件：** ####

// ComponentB.vue
    <script setup>
    import { onMounted, onUnmounted } from 'vue';
    import bus from '@/utils/eventBus.js'; // 引入事件总线
    let receivedData = '';
    onMounted(() => {
      // 订阅事件
      const off = bus.on('brotherEvent', (data) => {
        receivedData = data
        console.log('Received data from brother:', receivedData)
        // 在这里可以更新组件B的状态或者执行其他业务逻辑
      })
      // 当组件卸载时，取消事件订阅以避免内存泄漏
      onUnmounted(() => {
        off()
      })
    })
    </script>

#### **5、这样，当组件A中的按钮被点击时，会触发`emitData`方法，通过事件总线发送数据。而组件B则会在挂载后监听这个事件，一旦接收到数据就会在控制台打印出来，实现了兄弟组件间的通信。** ####

[15684f62252c4dfc91617a44fe652d79.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/676a1e564c0c495a889d0c799da2684e.gif