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传递，这样是可以实现，但是随着项目的代码量庞大很难做到维护。

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

原文：https://juejin.cn/post/7102973527384391710