【Vue3 第十六章】非父子组件间传值

前言

如果想要了解非父子关系的组件传值，最好是在了解父传子和子传父的基础上在来了解非父子传值可能会有更透彻的思路。在前面的章节中，已经介绍了父子组件如何传值，大家可以去看一看。
需要注意的是，在 vue3 中 $on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的 EventBus 便无法使用了。
Vue3 中非父子组件传值主要的方式有

• 事件总线
• 借助第三方插件
• provide 和 inject
• pinia
  而我们这篇文章只讲述其中的部分内容，像pinia我们会有专门的一篇文章来进行介绍。

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
权限系统-商城
个人博客地址

一、借助父组件传参

假设父组件 App 有两个子组件（同级组件） A 和 B：A 组件派发的事件，通过 App.vue 接收，然后通过 v-bind 传递给 B 组件。

<script setup>
    import A from './components/A.vue'
    import B from './components/B.vue'
    import { ref } from 'vue'
    let flag = ref(false)
    const getflag = (arg) => {
       flag.value = arg;
    }
</script>
<template>
    <div>
        <A @on-click="getflag"></A>
        <B :flag="flag"></B>
    </div>
</template>

缺点：比较麻烦 ，无法直接通信，只能充当桥梁。

二、借助 Event Bus 传参

Vue3 从实例中移除了 $on、$off 和 $once 方法，如果想要使用事件总线就需要自己手动写一个发布订阅模式来实现 Event Bus 。见下图：

class Bus {
    constructor() {
        this.list = { }
    }

    emit(eventName, ...args) {
        let eventFns = this.list[eventName]
        eventFns.forEach(fn => {
            fn.apply(this, args)
        })
    }

    on(eventName, callback) {
        let fnArr = this.list[eventName] || []
        fnArr.push(callback)
        this.list[eventName] = fnArr
    }

    off(eventName,callback) {
        let fnArr = this.list[eventName] || []
        if(callback){ 
            fnArr = fnArr.filter(v => v != callback)
        }else { 
            fnArr = []
        }
        this.list[eventName] = fnArr
    }
}

export default new Bus()

注：将其挂载到 Vue config 全局，或者在相关的组件中引入即可使用。

三、借助第三方插件

3.1 安装与配置

• 概述
  在 vue3 中 $on，$off 和 $once 实例方法已被移除，组件实例不再实现事件触发接口，因此大家熟悉的 EventBus 便无法使用了。然而我们习惯了使用EventBus，对于这种情况我们可以使用 Mitt库。

• 安装

  npm install mitt -S
  

• main.js 中配置

  import { createApp } from 'vue'
  import App from './App.vue'
  import mitt from 'mitt'
  const Mit = mitt()
  const app = createApp(App)
  app.config.globalProperties.$Bus = Mit
  app.mount('#app')
  

3.2 组件中使用

通过 emit 方法派发事件， on 方法添加事件，off 方法移除事件，clear 清空所有事件。这跟我们自己手动封装的 EventBus 及其类似。‘

• A 组件触发事件并传递数据

  <script setup lang='ts'>
  	import { getCurrentInstance } from 'vue'
  	const instance = getCurrentInstance();
  	const handleClick = () => {
  	    instance?.proxy?.$Bus.emit('h-click', 1111)
  	}
  </script>
  <template>
      <div>
          <h1>A组件</h1>
          <button @click="handleClick">派发事件</button>
      </div>
  </template>
  

• B 组件监听并接收数据

  <script setup lang='ts'>
  	import { getCurrentInstance } from 'vue'
  	const instance = getCurrentInstance()
  	instance?.proxy?.$Bus.on('h-click', (arg) => {
  	    console.log(arg)
      })
  <template>
      <div>
          <h1>B组件</h1>
      </div>
  </template>