vue3 defineExpose的使用

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>

当父组件通过模板引用的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

案例

<!-- Counter.vue -->
<script setup>
import { ref ，reactive } from 'vue';const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const state = reactive({count: 0,increment() {state.count++;}
});
function increment() {count.value++;
}// 暴露 count 和 increment 方法
defineExpose({count,increment,state,  // 暴露整个响应式对象doubleCount, //暴露计算属性
});
</script><template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template>

在父组件中，可以访问这些暴露的属性和方法

<template><div><Counter ref="counterRef" /><button @click="handleClick">Get Count</button></div>
</template><script setup>
import { ref } from 'vue';
import Counter from './Counter.vue';const counterRef = ref(null);function handleClick() {console.log(counterRef.value.count); // 访问暴露的 countcounterRef.value.increment(); // 调用暴露的 increment 方法
}
</script>

注意：

• defineExpose 只能在 script setup 中使用：它是一个编译时宏，不能在普通选项式 API 中使用。
• 默认暴露：如果不使用 defineExpose，组件默认不会暴露任何内容