vue3 向外暴露子组件方法和变量

第一步：在子组件中暴露

方法一

<script setup lang="ts">
const name ="abc";
const getData= () => {}
defineExpose({
  getData,
  name
})
</script>

方法二

defineComponent({
 	setup(props, ctx) {
		const name ="abc";
	 	const getData= () => {}
	  	ctx.expose({getData,name})
 	}
})

第二步：在父组件中使用

<template>
<image-preview ref="imgRef" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const imgRef = ref(null);
const preview=()=>{
  console.log(imgRef.value.name)
  console.log(imgRef.value.getData())
}