defineExpose
使用 <script setup>
的组件是默认关闭的——即通过模板引用或者 $parent 链获取到的组件的公开实例,** 不会 **暴露任何在 <script setup>
中声明的绑定。
可以通过 defineExpose 编译器宏来显式指定在 <script setup>
组件中要暴露出去的属性:
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>
demo案例:
写一个子组件,里面有一个message和add方法,然后再父组件中展示message和调用add的方法,代码如下:
子组件
<template>
<div class='content'>
<h1>{{count}}</h1>
</div>
</template>
<script setup >
import { ref } from 'vue'
const count = ref(0)
const message = ref('Hello from Child!')
const add = () => {
count.value++
}
defineExpose({
message,
add
})
</script>
父组件:
<template>
<div class='content'>
<h1>{{ parentData }}</h1>
<Child ref="child" />
<button @click="$refs.child.add()">父级按钮</button>
</div>
</template>
<script setup>
import Child from './Child.vue'
import { ref, onMounted } from 'vue'
const child = ref(null)
const parentData = ref('This is the parent data')
onMounted(() => {
parentData.value = child.value.message
})
</script>
点击按钮2下,在父组件页面展示的效果:
总结:
defineExpose
用于在 <script setup>
中显式暴露组件内部状态和方法
父组件可以通过 ref 访问子组件实例并调用暴露的属性和方法
使用 defineExpose
可以让组件更加模块化和可控,只有显式暴露的部分才能被外部访问,增强了封装性和安全性
这个功能在组件之间需要进行复杂交互时特别有用,尤其是在大型项目中,能够显著提升代码的可读性和可维护性