vue3 defineExpose 显示的指定组件需要暴露的属性

简介： 是 vue3 新增的一个 api ，用在 <script setup>中使用，用于显示的把组件的属性和方法暴露出来。可用于父子组件通信，子组件使用 defineExpose 将自身的方法或者属性暴露出去，父组件中通过 ref 获取子组件 DOM 并使用子组件暴露的方法和属性

使用

1、定义子组件并使用 defineExpose 将自身的属性或方法暴露

// update-password-dialog.vue 组件<template><a-modalclass="update-password-dialog"v-model:visible="visible"title="弹框"@ok="handleOk"><div class="item-box flex-row-start-center"> 这是一个弹框 </div></a-modal>
</template><script lang="ts" setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'const visible = ref<boolean>(false)
const handleOk = (): void => {visible.value = false
}const openModal = (): void => {visible.value = true
}
defineExpose({openModal
})
</script>

2、父组件中使用子组件暴露的方法或者属性

<template><div class="item-box" @click="updatePassword">修改密码</div><UpdatePasswordDialog ref="updatePasswordDialog" />
</template><script lang="ts" setup name="Avatar">
import UpdatePasswordDialog from './update-password-dialog.vue'
import { ref } from 'vue'type ModelExposeType = {openModal: () => void
}
const updatePasswordDialog = ref<null | ModelExposeType>()
const updatePassword = () => {updatePasswordDialog.value?.openModal()
}
</script>

注意：使用了 <script setup>语法糖组件，如果组件A 直接通过 ref 或者 $parent 获取组件B 并访问使用子组件的属性或方法，是没有办法获取到组件B 的公开实例的。因为使用了 <script setup>语法糖组件默认是关闭的，必须借助 defineExpose 编译器宏将子组件的变量方法主动暴露出去