vue3赋值组件通信之ts语法糖

父传子,子调用父

子组件调用父组件方法、函数
父组件
定义自己的函数,并绑定在子组件上@getFileList为任取,=“getFileList”为我们的函数

<template>
  <myDialog @getFileList="getFileList"></myDialog>
</template>

<script setup lang='ts'>
	const getFileList=()=>{}	//函数
</script>

子组件

<script setup lang='ts'>
	const emit=defineEmits(['getFileList'])		//接收,多个函数就打逗号
	
	emit('getFileList')	//调用,在哪儿调就放哪儿
	
	//带参数调用(a,b)为函数的参数
	emit('getFileList',a,b)	
</script>

子组件调用父组件值
父组件,通过:tableData="tableData"传值给子组件

<template>
  <myDialog ref="refDialog" :tableData="tableData"></myDialog>
</template>

<script setup lang='ts'>

	const tableData = []
	
	//响应式也可以
	const tableData = reactive<any>({
        list:[]
    })
</script>

子组件,通过defineProps接收,ts语法糖中不需引入,其余否者需要从vue中import导入defineProps,下面接收两种都可以

<template>
 <el-table :data="tableData.list"></el-table>		//直接引式调用
 
 <el-table :data="props.tableData.list"></el-table>		//调用(推荐)
</template>

<script setup lang='ts'>
	defineProps(['tableData'])		//接收,这样可以直接在模版使用tableData

	const props=defineProps(['tableData'])		//通过变量接收,(推荐)
	console.log(props.tableData.list)			
	
</script>

父调子,子传父

父组件调用子组件,我们需要用到ref属性进行元素获取,类似与js中的dom。获取后即可操作元素的属性、方法等。
父组件
在引用子组件处,定义一个ref属性ref=“refDialog”,此时我们就通过refDialog进行调用子组件defineExpose出的方法、变量等。如下演示:

<template>
  <myDialog ref="refDialog"></myDialog>
</template>
<script setup lang='ts'>

const refDialog=ref<{ 
 	show: (type:string,row?:any) => void,
 	getDeptList:()=>void
 }>();
 
</script>

子组件
通过defineExpose暴露方法,变量(ts语法糖不需引入,直接使用defineExpose即可)

<script setup lang='ts'>
const show=(type,row)=>{
	//...带参数函数()
}

const getDeptList=()=>{
	//...函数
}
defineExpose({
  show,getDeptList
})
</script>

使用pinia全局通信
pinia同vuex一样是状态管理工具,支持全局响应式通信,由于是一个工具库的使用,大家移步:详细pinia使用步骤(0基础)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大虾写代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值