What is Vue defineExpose?

Vue defineExpose 是啥？子组件如何沟通？

@ Vue

前言

近期要重写很多的 Vue 发现多得是我需要多补充的知识。你可能了解 Vue 组件间通过 props🔗 down 与 event🔗 up 或是使用 Scoped Slots🔗 来传递信息。

还有一种做法是「显式地暴露某些变量或函数给父组件使用」。

defineExpose

默认 Vue <script setup> 是封闭的，通过 defineExpose()🔗 Compiler Macros （宏编译器）写给编译器告知要暴露哪些资料给父组件。

Child.vue
<script setup>
const sayHello = () => {
  console.log('Hello from child!');
};


defineExpose({
  sayHello
});
</script>
parent.vue
<template>
  <Child ref="childRef" />
  <button @click="callChildMethod">Call Child Method</button>
</template>


<script setup>
import { ref } from 'vue';
import MyChild from './MyChild.vue';


const childRef = ref();


const callChildMethod = () => {
  childRef.value?.sayHello(); // 呼叫子组件暴露的方法
};
</script>

延伸阅读