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基础）