什么是兄弟组件

在一个页面中引入两个相邻的组件，就是兄弟组件，来定义两个平级的组件A和B，A和B互相传参；兄弟组件传值有两种方案，借助父组件传参 和 Event Bus 来传值

借助父组件传参

流程就是A组件做为子组件，向父组件传值，将父组件作为桥梁，将获取的数据，传给B组件，下面来演示一下

这是AB组件，即为兄弟组件

  <A></A>
  <B></B>

在A组件间中定义一个派发事件@click="change",派发事件是用defineEmits宏函数，可以用数组的方式去派发，自定义派发参数名

const emit = defineEmits(['on-click'])

通过派发事件派发出去，使用方法就是传递两个参数，一个自定义派发参数名，一个就是传递的数据

const change =() => {
  emit('on-click','A组件派发')
}

A组件的派发事件已经发送过去，父组件中接收一下，接收事件@on-click="getAvue",父组件作为依赖，将name值传给B组件

let name = ref('')
const getAvue = (params:string) => {
  name.value = params
}

B组件接收，接收的话使用defineProps来接收，这里用泛型字面量的方式来写，将获取的name值渲染页面即可，这种兄弟组件传值的方式就是借助父组件为桥梁来实现，缺点就是需要来回传参，过于繁琐

 type Props = {
    name: string
 }
 defineProps<Props>()

Event Bus

bus，类似于公共组件，是一个发布/订阅事件总线；先定义一个But.ts文件，先设置一些类型别名

type BusClass = {
  emit: (name:string) => void
  on: (name:string, callback: Function) => void
}

在文件中定义了Bus的类，在用implements来约束一下这个类

class Bus implements BusClass{}

定义on的方法，两个参数，name和callback，考虑到多次注册，这里就可以对象签名的方式，第一次注册的话，返回一个空数组，通过push将callback回调函数添加进来，最后将事件赋值给一个新对象

 on (name:string, callback: Function) {
    let fn:Array<Function> = this.list[name] || []
    fn.push(callback)
    this.list[name] = fn 
  }

定义emit的方法，先定义一个name参数，由于会接受多个参数，用...解构是方式去接收，定义一个eventName来获取到on定义的集合，获取到了就循环调用

  emit (name:string, ...args:Array<any>) {
    let eventName:Array<Function> = this.list[name]
    eventName.forEach(fn => {
      fn.apply(this, args)
    })
  }

这里就简单实现一个发布订阅模式，使用方法：组件引入Bus文件，A组件通过Bus.emit发布，B组件就可以Bus.on接收

A组件

const change =() => {
  Bus.emit('on-click','A组件派发33')
}

B组件

let name = ref('')
Bus.on('on-click', (params:string) => {
  name.value = params
})

兄弟组件传值的用法，简单封装发布订阅模式

什么是兄弟组件

借助父组件传参

Event Bus