vue3.0组件通信,vue3使用ts
本文主要介绍了Vue3.2 Ts组件间通信的实现，并通过实例代码进行了详细介绍。对大家的学习或工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
目录
亲子组件沟通1、defineProps2、defineEmits3、defineExpose4、v型兄弟组件沟通跨组件沟通提供/注入受疫情影响，在家工作了一段时间。最近有空说说我对Vue3.2 TS知识的理解和使用。今天我就总结一下项目中常用的一些组件之间的通信。
vue框架提供了开发前端组件的思路，页面由一个个组件组成。在一些大型项目中，组件的数量越来越多，也需要组件之间的通信。接下来，我们进入正题，谈谈如何在Vue 3.x TS中使用组件通信。
(vue3.x中组件之间的通信和2中基本相同，但是基于ts的编写可能会有一点不同。)
父子组件通信
1、defineProps
父母
模板
child:count= count num :labels= labels /
/模板
脚本安装语言=ts
从“@/components/child . vue”导入孩子
从“vue”导入{ ref }
const count num=ref(100)；
const labels=ref([])
/脚本
儿童
模板
div{{count}}/div
/模板
脚本安装语言=ts
//这里我们用的是typescript的写法
Tdata={count: number，labels:string[]}//声明父组件传递的数据和类型。
//这种写法无法设置默认值。
const props=definePropsTData()
//如何声明默认值
const props=with defaults(definePropsTData()，{
计数：1，
Labels:()=[Default1 ， default 2 ]//为复杂数据类型函数性地声明它。
})
Console.log(props.count) //可以直接在模板中获取值
/脚本
2、defineEmits
父母
模板
child @ change handle= change handle /
/模板
脚本安装语言=ts
从“@/components/child . vue”导入孩子
const changeHandle=((e)={
console.log(e)
})
/脚本
儿童
模板
Div @click=btnHandle 按钮单击/div
/模板
脚本安装语言=ts
从“vue”导入{ ref }
const count=ref(100)；
//编写//类型脚本
类型TFn={
(e:changeHandle ，值：数字):void
}
const emit=defineEmitsTFn()
const btnHandle=(()={
发出( changeHandle ，计数)
})
//非类型脚本的编写
const emit=define emits([ change handle ])
const btnHandle=(()={
发出( changeHandle ，计数)
})
/脚本
3、defineExpose
文件是这样介绍的：
默认情况下，使用脚本设置的组件是关闭的，也就是说，通过template ref或$parent chain获得的组件的公共实例不会公开脚本设置中声明的任何绑定。要指定脚本设置组件中要公开的属性，使用defineExpose编译器宏(实际上可以理解为父组件想要获取子组件的内容，子组件通过defineExpose公开内容)。
父母
模板
child ref=getChild /
Div @click=btnHandle 按钮单击/div
/模板
脚本安装语言=ts
从“@/components/child . vue”导入孩子
const getChild=ref(null)
const btnHandle=()={
//通过ref获取子组件的公开内容
console . log(get child . value . count)
console . log(get child . value . BTN handle())
}
/脚本
儿童
模板
Div @click=btnHandle 按钮单击/div
/模板
脚本安装语言=ts
从“vue”导入{ ref }
const count=ref(100)；
const btnHandle=()={
数数
}
defineExpose({count，btnHandle})
/脚本
4、v-model
父子之间的交流，有时候子组件需要修改父组件传递的内容。使用由defineProps传递的值，修改将给出一个错误。我通过vue2.x中的watch进行监控，然后将新值赋给data中的自定义属性。
在vue3.x中，我们可以传递v-model，修改值。直接操作吧！
模板
虚拟模型：count=count/A
/模板
脚本安装语言=ts
从 @/components/A.vue 导入A
从“vue”导入{ ref }
const count=ref(100)；
/脚本
模板
div{{count}}/div
Div @click=updateHandle 修改内容/div
/模板
脚本安装语言=ts
从“vue”导入{ ref }
const props=定义属性{ count:number }()
//修改
const emit=define发出([ update:count ])
const updateHandle=()={
发出(更新：计数,10)
}
/脚本
兄弟组件通信
在vue2.x中我们一般用中央事件总线（事件总线)来处理兄弟组件，在vue3中用米特()来处理兄弟组件之间的通信，实际用法和事件总线是一样的，我们来看看如何实现吧
手
第一步安装：
纱线添加手套构成名词复数
第二步创建
//在src/utils创建eventBus.ts
从“米特”导入手
const mitter=mitt()
默认导出发送器
第三步使用
//兄弟A组件
模板
div @click=btnHandle 按钮点击/div
/模板
脚本安装语言=ts
从@/utils/eventBus.ts 导入米特尔
从“vue”导入{ ref }
const count=ref(100)
mitter.emit(计数，计数。值)
/脚本
//兄弟B组件
模板
div @click=btnHandle 按钮点击/div
/模板
脚本安装语言=ts
从@/utils/eventBus.ts 导入米特尔
从“vue”导入{ ref }
const getCount=ref()
mitter.on(count ，(e)={
getCount.value=e
})
/脚本
跨组件通信
Provide/Inject
往往在业务中会存在跨组件之间的通信，有的同学可能会想到一层层通过定义方案传递，这样是可以实现，但是随着项目的代码量庞大很难做到维护。
//提供接收两个参数1、名称字符串类型2、价值
模板
答/答
/模板
脚本安装语言=ts
从@/utils/eventBus.ts 导入米特尔
从@/组件/A.vue 导入A
从“vue”导入{提供}
const count=ref(190)
提供(计数计数.值)
/脚本
！[构成动植物的古名或拉丁化的现代名]组件内的B组件-
//注入接收两个参数1、提供传如果来的名字2,可选参数，提供默认值
模板
差异我是B组件/div
/模板
脚本安装语言=ts
从@/utils/eventBus.ts 导入米特尔
从“vue”导入{注入}
const getCount=inject(count ，11)
/脚本
到此这篇关于Vue3.2 Ts组件之间通信的实现的文章就介绍到这了，更多相关Vue3.2 Ts组件通信内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。