问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501

Vue3.2+Ts组件之间通信

发布网友 发布时间:2024-09-17 06:07

我来回答

1个回答

热心网友 时间:2024-10-07 22:30

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

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

父子组件通信1、defineProps

Parent

<template><child:count="countNum":labels="labels"/></template><scriptsetuplang="ts">importchildfrom"@/componets/child.vue"import{ref}from"vue"constcountNum=ref(100);constlabels=ref([])</script>

Child

<template><div>{{count}}</div></template><scriptsetuplang="ts">//这里我们使用typescript的写法typeTData={count:number,labels:string[]}//声明父组件传过来的数据以及类型//这种写法无法设定默认值constprops=defineProps<TData>()//声明默认值的写法constprops=withDefaults(defineProps<TData>(),{count:1,labels:()=>["默认值1","默认值2"]//对于复杂数据类型以函数式声明})console.log(props.count)//模版中直接可以获取值</script>2、defineEmits

Parent

<template><child@changeHandle="changeHandle"/></template><scriptsetuplang="ts">importchildfrom"@/componets/child.vue"constchangeHandle=((e)=>{console.log(e)})</script>

Child

<template><div@click="btnHandle">按钮点击</div></template><scriptsetuplang="ts">import{ref}from"vue"constcount=ref(100);//typescript的写法typeTFn={(e:'changeHandle',value:number):void}constemit=defineEmits<TFn>()constbtnHandle=(()=>{emit('changeHandle',count)})//非typescript的写法constemit=defineEmits(["changeHandle"])constbtnHandle=(()=>{emit('changeHandle',count)})</script>3、defineExpose

文档是这么介绍的:使用?<scriptsetup>?的组件是默认关闭的,也即通过模板ref或者?$parent?链获取到的组件的公开实例,不会暴露任何在?<scriptsetup>?中声明的绑定。为了在?<scriptsetup>?组件中明确要暴露出去的属性,使用?defineExpose?编译器宏,(其实可以理解为父组件想获取子组件的内容,子组件通过defineExpose把内容暴露出去)

Parent

<template><childref="getChild"/><div@click="btnHandle">按钮点击</div></template><scriptsetuplang="ts">importchildfrom"@/componets/child.vue"constgetChild=ref(null)constbtnHandle=()=>{//通过ref获取子组件暴露出来的内容console.log(getChild.value.count)console.log(getChild.value.btnHandle())}</script>

Child

<template><div@click="btnHandle">按钮点击</div></template><scriptsetuplang="ts">import{ref}from"vue"constcount=ref(100);constbtnHandle=()=>{count++}defineExpose({count,btnHandle})</script>4、v-model

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

<template><Av-model:count="count"></A></template><scriptsetuplang="ts">importAfrom"@/components/A.vue"import{ref}from"vue"constcount=ref(100);</script><template><div>{{count}}</div><div@click="updateHandle">修改内容</div></template><scriptsetuplang="ts">import{ref}from"vue"constprops=defineProps<{count:number}>()//修改constemit=defineEmits(["update:count"])constupdateHandle=()=>{emit("update:count",10)}</script>兄弟组件通信

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

mitt

第一步安装:

yarnaddmitt-S

第二步创建

//在src/utils创建eventBus.tsimportmittfrom"mitt"constmitter=mitt()defaultexportmitter

第三步使用

//兄弟A组件<template><div@click="btnHandle">按钮点击</div></template><scriptsetuplang="ts">importmitterfrom"@/utils/eventBus.ts"import{ref}from"vue"constcount=ref(100)mitter.emit("count",count.value)</script>//兄弟B组件<template><div@click="btnHandle">按钮点击</div></template><scriptsetuplang="ts">importmitterfrom"@/utils/eventBus.ts"import{ref}from"vue"constgetCount=ref()mitter.on("count",(e)=>{getCount.value=e})</script>跨组件通信Provide/Inject

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

<template><div>{{count}}</div></template><scriptsetuplang="ts">//这里我们使用typescript的写法typeTData={count:number,labels:string[]}//声明父组件传过来的数据以及类型//这种写法无法设定默认值constprops=defineProps<TData>()//声明默认值的写法constprops=withDefaults(defineProps<TData>(),{count:1,labels:()=>["默认值1","默认值2"]//对于复杂数据类型以函数式声明})console.log(props.count)//模版中直接可以获取值</script>0

以上内容就是我在日常开发会用到的一些组件之间的通信,毕竟是前端小白,有不对的地方还请各位在评论区指正哦

原文:https://juejin.cn/post/7102973527384391710
声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com
绩效工资从工资里扣合法吗 无人机电机轴的主要功能有哪些? 闽侯南通多久发展 南通哪个位置最有潜力 南通未来的机遇有哪些 江苏南通的发展前景怎么样 南通这座城市未来发展前景怎样 我女儿阳历08年01月08日出生,{农历07年腊月初一}请高人帮忙改个名字... 我女儿是2012年1月10日10:35分出生的五行缺什么,取什么名字好 这种图片效果怎么做出来的,不是纯白板,仔细看有一个个均匀分布的小圆点... vue2.0组件之间通信(父子、子父、平级) Vue中利用全局事件总线实现组件之间通信 名片设计软件有哪些 哪个软件可以做名片 丙苯酚俗称是什么 狗被别人打死了 没有录像 狗被别人打死了可以报警吗 怎样才能开一个贴吧 怎么开百度的贴吧? 怎么在百度上开通属于我自己的贴吧? Nature Communications | 中国科学院植物研究所揭示泥炭藓湿地中独特的... 找工人拆旧床包红包吗 八字身强无印好吗,八字身强的条件是什么 绅士一流是什么意思 绅士是什么意思 解释 如何备份通讯录到微信公众号? 微信自己关注的公众号 可以导出备份吗 如何修改BIOS初始时间 VC++编译出错 No such file or directory 跟我学改BIOS之一:BIOS里面都有什么? xp怎么设置定时关机xp设置定时关机方法 XP系统。定时关机,我想明天早上06:00关闭计算机。如何设 新生儿化脓性脑膜炎护理 18三体综合症知多少 家庭暴力的5个解决方法 大家觉得哪顶帽子和本体更配?很纠结 有二对父子到商场买帽子为什么只买三顶帽子 奔驰c200二手价格 婴儿游泳水温是多少 婴儿游泳的最佳水温以及准备 香港旺角小龙女街头演唱经典老歌,行人听到都不愿离开! 南京晓庄附近是不是有个墓园 叫什么名字? 坐多少路的公交可以到那里... 南京瑞华大酒店酒店信息 欧乐堡五一人多吗_江苏用电的峰谷时段是怎样划分 2023年5月5号出生钟姓宝宝取名叫什么 2024年8月9号出生钟姓宝宝取名叫什么 2023年2月3号出生钟姓宝宝取名叫什么 2023年2月19号出生钟姓宝宝取名叫什么 原神雪山遗迹重机会刷新吗 我的房子是2014年入住的到2019年夏天开始漏雨了我家不是顶楼物业应不...