vue3中使用了defineExpose

在Vue 3中，使用了`defineExpose`函数来暴露组件的内部方法和属性给父组件使用。通过`defineExpose`，我们可以将组件内部的方法和属性暴露给父组件，使得父组件可以直接访问和调用这些方法和属性。

使用`defineExpose`的步骤如下：
1. 在组件内部，使用`setup`函数来定义组件的逻辑。
2. 在`setup`函数中，使用`defineExpose`函数来暴露组件的内部方法和属性。
3. 在父组件中，可以直接通过子组件的引用来访问和调用子组件暴露出来的方法和属性。

下面是一个示例代码：

// 子组件
<script>
import { defineExpose } from 'vue';

export default {
  setup() {
    const message = 'Hello, Vue 3!';
    const showMessage = () => {
      console.log(message);
    };

    defineExpose({
      showMessage,
    });

    return {
      message,
      showMessage,
    };
  },
};
</script>

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

<script>
import { ref } from 'vue';

export default {
  mounted() {
    this.childRef = ref(null);
  },
  methods: {
    callChildMethod() {
      this.childRef.value.showMessage();
    },
  },
};
</script>

在上面的示例中，子组件通过`defineExpose`函数将`showMessage`方法暴露给父组件使用。父组件通过子组件的引用`childRef`来调用子组件的`showMessage`方法。