Vue3 中 defineExpose 的使用方法

在 Vue3 的开发中，defineExpose 是一个非常实用的函数，它主要用于在组件中显式地暴露一些属性和方法，以便在父组件中能够访问到子组件的这些内容。

我们要明白为什么需要 defineExpose。在 Vue3 中，默认情况下子组件的属性和方法是不会暴露给父组件的，这是为了更好地遵循组件化的封装原则，避免父组件随意访问和修改子组件的内部状态，从而提高代码的可维护性和可测试性。但是在某些特定的场景下，父组件确实需要访问子组件的一些内部信息或调用其方法，这时 defineExpose 就派上用场了。

使用 defineExpose 非常简单。假设我们有一个子组件 ChildComponent.vue，在这个组件中，我们有一些数据和方法想要暴露给父组件。

<template>
  <div>
    <p>这是子组件</p>
  </div>
</template>

<script setup>
import { defineExpose } from 'vue';

const childData = '这是子组件的数据';
const childMethod = () => {
  console.log('这是子组件的方法被调用了');
};

defineExpose({
  childData,
  childMethod
});
</script>

在上述代码中，我们通过 defineExpose 函数将 childData 和 childMethod 暴露了出去。

接下来，在父组件 ParentComponent.vue 中如何访问这些暴露的属性和方法呢？

<template>
  <ChildComponent ref="childRef" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

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

const childRef = ref(null);

const callChildMethod = () => {
  if (childRef.value) {
    childRef.value.childMethod();
    console.log(childRef.value.childData);
  }
};
</script>

在父组件中，我们通过 ref 来获取子组件的引用，然后就可以访问到通过 defineExpose 暴露出来的属性和方法了。

defineExpose 在 Vue3 开发中为我们提供了一种可控的方式，让父组件能够按需访问子组件的内部信息和方法，合理使用它可以让我们的组件交互更加灵活，提高开发效率。