vue3父组件触发子组件事件或数据

//父组件
<template>
   <div>
      <gl-upload  ref='childRef'/>
   </div>
</template>
<script setup>
import { ref} from "vue"
let childRef=ref(null)
const fn=()=>{
   childRef.value.clearClick()
}
</script>




<template>
   <div>
      子组件页面
   </div>
</template>
export default {
    name: "glUpload",
}
<script setup>
import { ref} from "vue"
let childRef=ref(null)
const clearClick=()=>{
   console.log("子组件方法");
}
</script>

这个时候你调用父组件 fn这个方法发现并不能触发子组件的方法

之所以出现这个问题是这个setup语法糖糖，如果你使用了setup的语法糖，那么子组件里面的数据和事件是无法访问需要你先暴露出去，暴露出去之后ref才能访问。

正确的子组件的例子 defineExpose（）

<template>
   <div>
      子组件页面
   </div>
</template>
export default {
    name: "glUpload",
}
<script setup>
import { ref} from "vue"
let childRef=ref(null)
const clearClick=()=>{
   console.log("子组件方法");
}
defineExpose({clearClick})//暴露子组件的方法或者数据
</script>