大连哪里有手机自适应网站建设,wordpress表格,特色网站模板,备案网站地址简介#xff1a; 是 vue3 新增的一个 api #xff0c;用在 script setup中使用#xff0c;用于显示的把组件的属性和方法暴露出来。可用于父子组件通信#xff0c;子组件使用 defineExpose 将自身的方法或者属性暴露出去#xff0c;父组件中通过 ref 获取子组件 D… 简介 是 vue3 新增的一个 api 用在 script setup中使用用于显示的把组件的属性和方法暴露出来。可用于父子组件通信子组件使用 defineExpose 将自身的方法或者属性暴露出去父组件中通过 ref 获取子组件 DOM 并使用子组件暴露的方法和属性 使用
1、定义子组件并使用 defineExpose 将自身的属性或方法暴露
// update-password-dialog.vue 组件templatea-modalclassupdate-password-dialogv-model:visiblevisibletitle弹框okhandleOkdiv classitem-box flex-row-start-center 这是一个弹框 /div/a-modal
/templatescript langts setup
import { ref } from vue
import { message } from ant-design-vueconst visible refboolean(false)
const handleOk (): void {visible.value false
}const openModal (): void {visible.value true
}
defineExpose({openModal
})
/script
2、父组件中使用子组件暴露的方法或者属性
templatediv classitem-box clickupdatePassword修改密码/divUpdatePasswordDialog refupdatePasswordDialog /
/templatescript langts setup nameAvatar
import UpdatePasswordDialog from ./update-password-dialog.vue
import { ref } from vuetype ModelExposeType {openModal: () void
}
const updatePasswordDialog refnull | ModelExposeType()
const updatePassword () {updatePasswordDialog.value?.openModal()
}
/script
注意使用了 script setup语法糖组件如果组件A 直接通过 ref 或者 $parent 获取组件B 并访问使用子组件的属性或方法是没有办法获取到组件B 的公开实例的。因为使用了 script setup语法糖组件默认是关闭的必须借助 defineExpose 编译器宏将子组件的变量方法主动暴露出去
