父传子,子调用父
子组件调用父组件方法、函数
父组件
定义自己的函数,并绑定在子组件上@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基础)