本文采用<script setup />的写法,比options API更自由。那么我们就来说说以下七种组件通信方式:
propsemitv-modelrefsprovide/injecteventBusvuex/pinia举个例子本文将使用下面的演示,如下图所示:
上图中,列表和输入框分别是父组件和子组件。根据不同的通信方式,父子组件会有所调整。
(资料图片仅供参考)
1.PropsProps是Vue中最常见的父子通信方式,使用起来也比较简单。
根据上面的demo,我们在父组件中定义数据和对数据的操作,子组件只渲染一个列表。
父组件代码如下:
<script setup>import { ref } from "vue"import ChildComponents from "./child.vue"const list = ref(["JavaScript", "HTML", "CSS"])const value = ref("")// event handling function triggered by addconst handleAdd = () => { list.value.push(value.value) value.value = ""}</script>
子组件只需要渲染父组件传过来的值即可。
代码如下:
2. emit<script setup>import { defineProps } from "vue"const props = defineProps({ list: { type: Array, default: () => [], },})</script>
- {{ i }}
Emit也是Vue中最常见的组件通信方式,用于子组件向父组件传递消息。
我们在父组件中定义列表,子组件只需要传递添加的值即可。
子组件代码如下:
<script setup>import { ref, defineEmits } from "vue"const value = ref("")const emits = defineEmits(["add"])const handleSubmit = () => { emits("add", value.value) value.value = ""}</script>
单击子组件中的 [Add] 按钮后,我们发出自定义事件并将添加的值作为参数传递给父组件。
父组件代码如下:
- {{ i }}
<script setup>import { ref } from "vue"import ChildComponents from "./child.vue"const list = ref(["JavaScript", "HTML", "CSS"])// event handling function triggered by addconst handleAdd = value => { list.value.push(value)}</script>
在父组件中,只需要监听子组件的自定义事件,然后执行相应的添加逻辑即可。
3.v-modelv-model是Vue中一个优秀的语法糖,比如下面的代码。
这是以下代码的简写形式
确实容易多了。现在我们将使用 v-model 来实现上面的例子。
子组件<script setup>import { ref, defineEmits, defineProps } from "vue"const value = ref("")const props = defineProps({ list: { type: Array, default: () => [], },})const emits = defineEmits(["update:list"])// Add actionconst handleAdd = () => { const arr = props.list arr.push(value.value) emits("update:list", arr) value.value = ""}</script>
在子组件中,我们先定义props和emit,添加完成后,再emit指定的事件。
注意:update:*是Vue中固定的写法,*代表props中的一个属性名。
在父组件中使用比较简单,代码如下:
4. refs
- {{ i }}
<script setup>import { ref } from "vue"import ChildComponents from "./child.vue"const list = ref(["JavaScript", "HTML", "CSS"])</script>
在使用option API时,我们可以通过this.$refs.name获取指定的元素或组件,而在combined API中则不行。如果我们想通过ref获取,需要定义一个同名的Ref对象,组件挂载后才能访问到。
示例代码如下:
- {{ i }}
<script setup>import { ref } from "vue"import ChildComponents from "./child.vue"const childRefs = ref(null)</script>
子组件代码如下:
<script setup>import { ref, defineExpose } from "vue"const list = ref(["JavaScript", "HTML", "CSS"])const value = ref("")// event handling function triggered by addconst handleAdd = () => { list.value.push(value.value) value.value = ""}defineExpose({ list })</script>
注意:默认情况下,setup组件是关闭的,通过template ref获取组件的public实例。如果需要暴露,需要通过defineExpose API暴露。
5.provide/injectProvide 和 inject 是 Vue 中提供的一对 API。无论层次有多深,API都能实现父组件到子组件的数据传递。
示例代码如下所示:
父组件子组件 <script setup>import { ref, provide } from "vue"import ChildComponents from "./child.vue"const list = ref(["JavaScript", "HTML", "CSS"])const value = ref("")// Provide data to child components.provide("list", list.value)// event handling function triggered by addconst handleAdd = () => { list.value.push(value.value) value.value = ""}</script>
<script setup>import { inject } from "vue"// Accept data provided by parent componentconst list = inject("list")</script>
- {{ i }}
注意:使用provide进行数据传递时,尽量用readonly封装数据,避免子组件修改父组件传过来的数据。
6.eventBus在 Vue 3 中移除了 eventBus,但可以借助第三方工具来完成。Vue 官方推荐 mitt 或 tiny-emitter。大多数情况下,不推荐使用全局事件总线来实现组件通信。虽然比较简单粗暴,但是长期维护event bus是个大问题,这里就不多说了。具体可以阅读具体工具的文档。
7.Vuex && PiniaVuex和Pinia是Vue 3中的状态管理工具,使用这两个工具可以轻松实现组件通信。由于这两个工具比较强大,这里就不展示了。有关详细信息,请参阅文档。
最后以上就是我今天想与你分享的Vue3中的7个组件通信技巧,如果对你有帮助的话,请记得点赞我,关注我,并将这篇文章分享给你的朋友,也许能够帮助到他。
最后,谢谢你的阅读。
标签:
-
环球头条:Vue 3 中的七个组件通信技巧
写在前面本文采用子组件只需要渲染父组件传过来的值即可。代码如下:{{i}}2 emitEmit也是Vue中最常见的组件通信方式,用于子组件
-
泰国遭遇持续高温|每日短讯
4月19日,行人在泰国曼谷街头用手遮阳。新华社发(拉亨摄) 近日,泰国遭遇持续高温天气,多地最高气温超过40摄氏度。泰国卫生部提醒民众减
-
NBA季后赛太阳逆转快船,放大10倍后看细节,原因清晰可见 环球观热点
太阳和快船如果只打一轮都很强,打到后面就都不行了,小卡这两场是打的不错,但是他是有老伤的,而且也不年轻了,杜兰特也是,还有保罗很老了
-
探索现场检测仪器本土化路径 霍尼艾格闪亮现身CIEPEC2023-天天速读
2023年4月13日,第二十一届中国国际环保展览会(CIEPEC2023)在北京中国国际展览中心(朝阳馆)隆重开幕。本次展会以“绿水青山就是金山银山
-
福莱特(601865)4月20日主力资金净卖出727.89万元
截至2023年4月20日收盘,福莱特(601865)报收于32 24元,下跌1 92%,换手率0 2%,成交量3 44万手,成交额1 11亿元。
-
单身产子的小青霞,为何不公布孩子父亲身份,谢霆锋已洗脱嫌疑?
小青霞生下三胎已经好几年了,为何不公布孩子父亲身份呢?娱乐圈是个鱼龙混杂的地方,总会发生许许多多让人意想不到的事情,在娱乐圈里有一种
-
Odeko 在 D 系列融资中筹集了 5300 万美元|通讯
该轮融资总额达到1 77亿美元,由现有投资者BCapital领投,包括GGVCapital和TigerGlobalManagement的
-
lovely什么意思中文名字_lovely什么意思-世界热议
你们好,最近小品发现有诸多的小伙伴们对于lovely什么意思中文名字,lovely什么意思这个问题都颇为感兴趣的,今天小
-
十大考古新发现探秘之四|这个重大发现,从确定一段围墙开始
全国十大考古新发现公布当天,中国社会科学院考古研究所二里头考古队队长赵海涛发了一张含苞待放的洛阳牡丹图片到朋友圈,内心充满期待。几个
-
有公司宣布取消所有调休!专家建议增加假期天数,理由是……_环球聚焦
近日话题 公司取消了所有的调休 冲上热搜引发网友热议有网友在小红书发文称自己公司取消了所有的调休据了解,该公司在福建厦门4月18日曾发布通
-
钢之炼金术师 和fa_钢之炼金术师与fa区别 天天即时
1、钢之炼金术师和钢之炼金术师FA,剧情没有任何关系,钢之炼金术师出的时候漫画没出完所有从古利德出现之后的剧情全部是原创
-
今年一季度兰州市公安机关抓获网上在逃人员305名
中国甘肃网4月20日讯据兰州晚报报道(记者王进)4月19日,记者从兰州市公安局获悉,今年一季度,全市公安机关严格落实全警追逃责任,积极整合各
-
小说《狂野的爱河》|焦点滚动
1、《荒乱的情河》是烟雨红尘已完结的社会历史小说,作者是dfg玉树临风。2、这部小说的故事背景为近代,故事开始是源自于父
-
天天动态:中信证券:海外电池厂对2023年全球锂电池的增长保持乐观
中信证券研报称,海外主流电池厂相继发布2022四季度经营情况。营收和装机量方面,各家保持增长态势,但受原材料上涨以及年末计提一次性费用影
-
悄然开始又悄然中止,抖音直播卖药按下暂停键-环球时快讯
悄然开始又悄然中止,抖音直播卖药按下暂停键按下暂停键 日前,抖音连发两则公告,对其医疗内容生态进行调整。 抖音健康指出,平台不支
-
轻工业数字化水平加快提升|当前速看
本报北京4月19日电(记者韩鑫)记者从近日在京举行的第十三届轻工业信息化大会上获悉:目前,全国轻工业企业平台化设计比例达到16 3%,智能化
-
房子到手发现宣传展示的院子没有了,房开商被判赔23万_资讯推荐
“五层联排院墅,地上3层+地下2层灵动空间,独立入户,均享私家庭院,有天有地有院子。”相信很大一部分购房者都被这样的广告语吸引了,但...
-
档案盒侧面标签样本_什么是nofollow标签
1、Nofollow标签是html中的一个标签属性值,最初出现在网页级元标记中,用于指示搜索引擎不要追踪(即抓取)网页上
-
【全球新视野】黑油膏商品报价动态(2023-04-19)
交易商品牌 产地交货地最新报价黑油膏 含量99%,40kg 袋济南金锦泉经贸有限公司国产山东省6000元 吨济南鑫厚商贸有限公司国产河南省5500元 吨
-
扩大内需是什么意思通俗解释_扩大内需是什么意思
1、内需,即内部需求,包括投资需求和消费需求两个方面。2、扩大内需,就是要通过发内行国债等积容极财政货币政策,启动投资市
-
世界滚动:ChatGPT如何倒逼人工智能产业?对就业影响几何?上海市科委解答
骆大进在访谈现场。上海市科委供图怎样鼓励青年科技工作者勇闯‘无人区’,实现下一个“0到1”的突破?ChatGPT来了,上海又将如何布局?4月19
-
环球视点!癌症病人死前五个阶段是什么?癌症扩散到什么程度会死?
1、震惊和否认期:在开始得知患有癌症时,病人大都无法接受这一事实。接着,病人会否认患病的事实,认为 "><linkhref= "http: www szonlin
-
用地红线的定义_用地红线是什么意思
1、《民用建筑设计通则GB50352—2005》2术语中有明确定义:2.0.8用地红线boundarylineofland;property
-
任添琪电影 任添琪
今天来聊聊关于任添琪电影,任添琪的文章,现在就为大家来简单介绍下任添琪电影,任添琪,希望对各位小伙伴们有所帮助。1、没有
-
丽彦妆集团旗下赛迪药业“无证或超范围生产化妆品”被罚
日前,广州市市场监督管理局发布的一则行政处罚信息显示,广州市赛迪药业科技有限公司因无证或超范围生产化妆品,被罚款5 2万元。
-
当前观点:瑞银:将中国2023年GDP增速预测上调至5.7%
瑞银:将中国2023年GDP增速预测上调至5 7%,中国,汪涛,中证,瑞士银行,经济学家,瑞银集团,财务会计,投资管理,财务报表,gdp增速
-
小说红楼梦中薛姨妈为何从不邀请贾府众人看戏? 天天快看
薛姨妈是小说红楼梦中的人物,王夫人之妹。让趣历史小编带大家拨开历史的迷雾,回到那刀光剑影的年代。儒家讲究厚往薄来,你敬我一尺,我敬你
-
统计局:中国房地产业GDP同比增长1.3% 住宿和餐饮业同比增长13.6%
观点网讯:4月19日,国家统计局发布2023年一季度国内生产总值初步核算结果。数据显示,2023年一季度我国国内生产总值(GDP)284997亿元,按不变价
-
每经操盘必知(下午版)丨沪指跌0.68%,旅游、传媒板块大涨;上海:加强“科创企业上市培育库”建设;奥比中光:海外子公司部分业务场景已接入ChatGPT-4-全球播资讯
北京时间4月19日15:00,上证指数收盘下跌23 2点,跌幅为0 68%,报收3370 13点,成交额4764 97亿元;深证成指收盘下跌100 13点,跌幅为0 84%,报收11760 27点,成
-
融e贷逾期八天延迟还款影响征信吗 新视野
网贷逾期一般会上征信,有些借贷机构在用户逾期后一天后就会上报给征信机构,而有些借贷机构则是会在几天后上报给征信机构,因为有些借贷机构可