Vue3.2+Ts组件之间通信的实现

目录

• 父子组件通信
• 1、defineProps
• 2、defineEmits
• 3、defineExpose
• 4、v-model
• 兄弟组件通信
• 跨组件通信
• Provide/Inject

受疫情影响，居家办公有一阵了，最近闲下来开始谈谈自己对于Vue3.2 + TS 知识的理解和使用。今天就总结下项目中常用到的一些组件之间的通信。

vue框架提供了前端开发组件的思想，页面由一个个组件组合而成，在一些大型项目中，组件的数量越来越多，之间也需要通信，接下来我们进入主题，谈谈vue3.x + ts中如何使用组件通信。
（vue3.x中组件之间通信和2基本上差别不大，就是基于ts写法可能有点差别。）

父子组件通信

1、defineProps

Parent

Child

2、defineEmits

Parent

Child

3、defineExpose

文档是这么介绍的：

使用 

Child

4、v-model

父子之间通信，有时需要子组件修改父组件传递过来的内容，使用defineProps穿过来的值，进行修改会报错，我在vue2.x中通过watch监听，然后把新值赋值data内自定义属性。
在vue3.x中我们可以通过v-model的传递并可以进行修改值，我们直接操作吧！

兄弟组件通信

在vue2.x中我们一般用中央事件总线（eventBus）来处理兄弟组件，在vue3中用mitt()来处理兄弟组件之间的通信，实际用法和eventBus是一样的，我们来看看如何实现吧

mitt

第一步安装：

yarn add mitt -S

第二步创建

//在src/utils创建eventBus.ts
import mitt from "mitt"
const mitter = mitt()
default export mitter

第三步使用

//兄弟A组件



//兄弟B组件

跨组件通信

Provide/Inject

往往在业务中会存在跨组件之间的通信，有的同学可能会想到一层层通过defineProps传递，这样是可以实现，但是随着项目的代码量庞大很难做到维护。

//provide 接收两个参数 1、name 2、value




//inject 接收两个参数 1、provide传如果来的name 2、可选参数，提供默认值

到此这篇关于Vue3.2+Ts组件之间通信的实现的文章就介绍到这了,更多相关Vue3.2 Ts组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！