兄弟(任意组件)通信
1、兄弟组件通信:可以先把值传给父组件,再通过父组件传给另一个子组件,就做到了兄弟组件的传参,但是问题就是及其麻烦,所以引出第二种方式
2、通过消息的发布订阅来实现,定义一个bus(可实现任意组件通信)
先在父组件所在目录下定义一个Bus.ts文件
// 先定义一个类型,emit作为发布(传递),on作为订阅(接收)
// name是事件名称,callback是一个回调函数
type BusClass = {
emit:(name:string) => void
on:(name:string, callback:Function) => void
}
// 定义多种参数类型
type PramsKey = string | number | symbol
// 定义一个调用中心,可以接收多个参数
type List = {
[key:PramsKey]: Array<Function>
}
class Bus implements BusClass {
list: List
constructor (){
// 初始化list
this.list = {}
}
// 发布事件,...args解构多个参数
emit (name:string,...args:Array<any>){
// 获取到list里的数据
let evnentName:Array<Function> = this.list[name]
evnentName.forEach(fn =>{
fn.apply(this, args)
})
}
// 接收事件
on (name:string, callback:Function){
// 如果是第一次注册,则为空;如果被多次注册,则采用之前注册的名字
let fn:Array<Function> = this.list[name] || []
fn.push(callback)
this.list[name] = fn
}
}
// 导出bus
export default new Bus()
现在来使用刚刚定义的bus,将A组件的值传递给B组件
A组件
<button @click="emitB">派发一个事件</button>
// 引入bus
import Bus from '../Bus'
// 定义一个属性值
let flag = '我来自A组件'
const emitB = () =>{
// 通过Bus发布出去一个'on-click'事件,并携带flag 参数
Bus.emit('on-click',flag)
}
B组件
// 引入bus
import Bus from '../Bus'
// 接收事件
Bus.on('on-click',(flag: string) =>{
console.log('接收的值为',flag)
})
这样就完成了一个兄弟组件的传参
该方法不仅方便,且可以实现任意组件通信,极其方便实用!
该方法不仅方便,且可以实现任意组件通信,极其方便实用!
引入Mitt来完成任意组件通信
首先安装依赖:
#安装命令
npm install mitt -S
全局使用
在main.ts文件中引入并开启使用
// 引入
import mitt from 'mitt'
//定义
const Mit = mitt()
//全局声明
declare module 'vue' {
export interface ComponentCustomProperties{
$Bus: typeof Mit
}
}
//使用
app.config.globalProperties.$Bus = Miit()
引入完成,使用方式和手写的基本一致,只不过名字不同
A组件
<button @click="emit">派发一个事件</button>
//引入
import {getCurentInstance} from 'vue'
//初始化
const instance = getCurentInstance()
//使用(发送事件)
const emit = () =>{
// emit(自定义事件名,参数,....)
instance?.proxy?.$Bus.emit('on-click',xxx)
}
B组件
// 引入bus
import getCurentInstance from 'vue'
// 初始化
const instance = getCurentInstance()
// 接收事件
instance?.proxy?.$Bus.on('on-click',(xxx: string) =>{
console.log('接收的值为',xxx)
})
如果此时A组件发送了多个事件,B组件可以用*接收,写法如下
// yyy,xxx为两个事件的参数
instance?.proxy?.$Bus.on('*',(yyy,xxx) =>{
console.log('接收的值为',yyy,xxx)
})
有发送事件,自然还有取消事件
// 这里先把Bus提取出来
const Bus = (xxx) =>{
console.log('接收的值为',xxx)
}
// 这里依旧写on,接收事件
instance?.proxy?.$Bus.on('on-click',Bus)
// 这里还可以调用取消指定事件
// off(取消指定的mitt事件,取消的函数)
instance?.proxy?.$Bus.off('on-click',Bus)
// 还可以取消全部事件
instance?.proxy?.$Bus.all.clear()