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

法1 ：ref

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

子组件页面

<template>
    <!---添加和编辑视频 -->        
    <el-dialog v-model="dialogVisible" title="添加课程" top="10vh" 
    width="640px" :before-close="handleClose">
        
    </el-dialog>
</template>
​
<script setup>
import {ref} from 'vue'
const dialogVisible = ref(false)
​
// 打开用户弹窗组件
const handleOpen = ()=>{
  dialogVisible.value = true;
}
// 关闭用户弹窗组件
const handleClose = ()=>{
  dialogVisible.value = false;
}
​
// 子组件默认包含是私有
defineExpose({
  handleOpen,
  handleClose
})   
​
</script>
​
<style lang="scss" scoped>
​
</style>>

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
<user-dialog ref="userDialogRef"></user-dialog>

（3）给组件取个ref名字

const userDialogRef = ref("")

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

4: 调用方法

<el-button type="primary" @click="handleOpenUserDialog">请选择用户</el-button>

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

法2： emits

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

 <add-video ref="addVideoRef" @load="handleLoadData"></add-video>

 子组件页面：

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

法3 ： provide  inject

父页面：

provide("handleLoadData",handleLoadData)

子页面

const handleLoadData = inject("handleLoadData")

handleLoadData()