Vue3组件通信 详解(上)

Vue3组件通信和Vue2的区别

• 移出事件总线，使用mitt代替。
• vuex换成了pinia。
• 把.sync优化到了v-model里面了。
• 把$listeners所有的东西，合并到$attrs中了。
• $children被砍掉了。

常见搭配形式

props

概述：props是使用频率最高的一种通信方式，常用与 ：父 ↔ 子。

• 若 父传子：属性值是非函数。
• 若 子传父：属性值是函数。

父组件：

子组件：

自定义事件

• 子组件中：使用“defineEmits”定义事件命名为“Xxx”
• 子组件中：调用事件“Xxx”，将数据传递出去
• 父组件中：调用组件,绑定事件“Xxx”，接受数据

子组件：

父组件： 

Mitt

概述：与消息订阅与发布（pubsub）功能类似，可以实现任意组件间通信。

安装mitt

npm i mitt

model.ts文件

• 暴露emitter

// 引入mitt 
import mitt from "mitt";
// 创建emitter
const emitter = mitt()
//暴露emitter
export default emitter

Model1.vue文件

Model2.vue文件