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

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

使用

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

// update-password-dialog.vue 组件

<template>
 <a-modal
  class="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 编译器宏将子组件的变量方法主动暴露出去