vue3 defineExpose 显示的指定组件需要暴露的属性-Toy模板网

这篇具有很好参考价值的文章主要介绍了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 编译器宏将子组件的变量方法主动暴露出去文章来源地址https://www.toymoban.com/news/detail-707821.html

到了这里，关于vue3 defineExpose 显示的指定组件需要暴露的属性的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！