vue3 组件defineExpose的使用

defineExpose 是 Vue 3 中提供的一个编译器宏，用于在 `<script setup>` 语法糖的组件中明确要暴露出去的属性。通过使用 defineExpose，可以将需要暴露的变量和方法放入暴露出去，以供其他组件或模板使用。

在使用 defineExpose 的方式中，首先需要使用 `import { ref } from 'vue'` 导入需要使用的模块，然后声明需要暴露的变量和方法，将其放入 defineExpose 中进行暴露。例如：

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

const demo = ref('测试用例');

const handleVal = () => {
  demo.value = "已改变";
};

// 将需要暴露出去的数据与方法都可以暴露出去
defineExpose({
  demo,
  handleVal,
});
</script>

<template>
  <div class="inner">
    {{demo}}
    <button @click="handleVal">改值</button>
  </div>
</template>

<style lang="scss" scoped>
</style>

在父组件中，可以通过模板的 ref 获取到子组件的实例，并使用子组件暴露出来的数据和方法。例如：

<template>
  <div class="container">
    <h-demo ref="childDom" />
    <button @click="getChild">获取子组件数据和方法</button>
  </div>
</template>

<script setup>
import Hdemo from '@/components/Hdemo';
import { ref, onMounted } from 'vue';

const childDom = ref(null);

onMounted(() => {
  const getChild = () => {
    console.log(childDom.value); // 打印当前子组件暴露出来的数据
    childDom.value.handleVal(); // 执行子组件方法
  }
})
</script>

<style lang="scss" scoped>
</style>

以上是使用 defineExpose 的示例，通过在子组件中暴露出需要使用的数据和方法，并在父组件中获取子组件的实例，可以进行数据和方法的交互。