学习vue3 第十章 （组件传值和mitt）

本文主要是介绍学习vue3 第十章 （组件传值和mitt），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

父子组件传值

父向子传值

父组件：通过v-bind绑定一个数据

子组件：通过defineProps接受传过来的值（defineProps是无须引入的直接使用即可）

子向父传值

子组件：通过defineEmits派发一个事件

父组件：接受子组件派发的事件

Event Bus

 
type BusClass<T> = {emit: (name: T) => voidon: (name: T, callback: Function) => void
}
type BusParams = string | number | symbol 
type List = {[key: BusParams]: Array<Function>
}
class Bus<T extends BusParams> implements BusClass<T> {list: Listconstructor() {this.list = {}}emit(name: T, ...args: Array<any>) {let eventName: Array<Function> = this.list[name]eventName.forEach(ev => {ev.apply(this, args)})}on(name: T, callback: Function) {let fn: Array<Function> = this.list[name] || [];fn.push(callback)this.list[name] = fn}
}export default new Bus<number>()

//APP.vue
<div><A></A><B></B>
</div>import Bus from "../bus.ts"//A.vue
<div @click="emit">A子组件emit一个事件</div>
const flag = ref(falg)
派发事件emitClick
const emitB = () => {flag = !flagBus.emit("emitClick", flag)
}//B.vue
<div>B子组件{{flag}}</div>const flag = ref(false)
接收事件emitClick
Bus.on("emitClick", (val) => {flag = val
})

mitt

安装：npm install mitt -S

main.ts挂载全局

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'const Mit = mitt()//TypeScript注册
// 由于必须要拓展ComponentCustomProperties类型才能获得类型提示
declare module "vue" {export interface ComponentCustomProperties {$Bus: typeof Mit}
}const app = createApp(App)//Vue3挂载全局API
app.config.globalProperties.$Bus = Mitapp.mount('#app')

通过emit派发， on 方法添加事件，off 方法移除，clear 清空所有

//A.vue子组件
<template><div><h1>我是A</h1><button @click="emit1">emit1</button><button @click="emit2">emit2</button></div>
</template><script setup lang='ts'>
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance();
const emit1 = () => {instance?.proxy?.$Bus.emit('on-num', 100)
}
const emit2 = () => {instance?.proxy?.$Bus.emit('*****', 500)
}
</script>//B.vue子组件
<template><div><h1>我是B</h1></div>
</template><script setup lang='ts'>import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on('on-num', (num) => {console.log(num,'===========>B')
})//多个事件：监听所有事件
instance?.proxy?.$Bus.on('*',(type,num)=>{console.log(type,num,'===========>B')
})
</script>

这篇关于学习vue3 第十章 （组件传值和mitt）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---