在setup语法糖中,如何获取子组件中的属性(defineExpose)

168 阅读1分钟

业务场景

在登录/注册页面获取封装好的数字验证码组件的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>