业务场景
在登录/注册页面获取封装好的数字验证码组件的imgCode属性,那么如何拿到呢。
这就要使用defineExpose 编译器宏来显式指定在 <script setup> 组件中要暴露出去的属性:
<script setup>
import { ref } from 'vue'
const imgCode = ref('DFO1')
defineExpose({
imgCode
})
</script>
在父组件中获取imgCode属性:
<template>
<div>
<!-- 图形验证码组件 -->
<VueImageVerify ref="verifyRef"/>
<div/>
<template/>
<script setup>
import { ref } from "vue"
// 获取图形验证码组件的dom
const verifyRef = ref(null)
// 拿到imgCode属性
const imgCode = verifyRef.value.imgCode
</script>