Vue3中父组件调用子组件的方法

法1 ：ref

1：定义页面组件或者组件

子组件页面

​

​
>

2: 要暴露被外界定义的方法

import {ref} from 'vue'
const dialogVisible = ref(false)
​
// 打开用户弹窗组件
const handleOpen = ()=>{
  dialogVisible.value = true;
}
// 关闭用户弹窗组件
const handleClose = ()=>{
  dialogVisible.value = false;
}
​
// 子组件默认包含是私有
defineExpose({
  handleOpen,
  handleClose
})   

父组件页面

3: 调用组件的方法

（1）导入上面定义的页面组件

import UserDialog from '@/view/video/components/UserDialog.vue'

（2）然后定义组件

 在父组件中使用子组件   注意要使用ref: userDialogRef

（3）给组件取个ref名字

const userDialogRef = ref("")

这个名字就可以调用到组件中通过defineExpose暴露的方法

4: 调用方法

请选择用户

​
// 打开用户弹窗
const handleOpenUserDialog = ()=>{
  userDialogRef.value.handleOpen()
}
​

法2： emits

父组件页面： 使用子组件  并定义 子组件上的自定义事件load，传入父组件里面自己定义的函数

 子组件页面：

//定义
 const  emits = defineEmits(["load"])
//使用
 emits("load")

法3 ： provide  inject

父页面：

provide("handleLoadData",handleLoadData)

子页面

const handleLoadData = inject("handleLoadData")

handleLoadData()