vue3 使用defineExpose暴露dataname变量

在 Vue 3 中，组件的 `setup()` 函数中可以使用 `defineExpose()` 方法来暴露一些变量或方法，使得它们能够被父组件调用。

假设我们有一个子组件 `ChildComponent`，其中有一个名为 `dataname` 的变量需要被父组件调用，可以这样写：

import { defineComponent, defineExpose } from 'vue';

export default defineComponent({
  setup() {
    const dataname = 'hello';

    // 暴露 dataname 变量
    defineExpose({ dataname });

    return {
      dataname,
    };
  },
});

在父组件中，可以通过 `$refs` 来访问 `ChildComponent` 组件，然后调用 `dataname` 变量：

<template>
  <ChildComponent ref="childRef" />
  <div>{{ childRef.dataname }}</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
};
</script>

这样就可以在父组件中访问到 `ChildComponent` 中暴露的 `dataname` 变量了。