vue3 tsx 如何暴漏方法给外部，expose

setup 函数确实可以直接接收一个 expose 参数，通过这个参数我们可以控制哪些属性或方法暴露给父组件。这种方式在使用 <script setup> 语法时特别有用，并且它提供了一种更直接的方法来指定要暴露的内容，而不需要使用编译器宏或者生命周期钩子。

下面是一个使用 setup 函数的 expose 参数的例子：

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

// 定义内部状态和方法
const message = ref('Hello from child component!');
const greet = () => {
  console.log(message.value);
};

// 内部方法，不希望暴露出去
const internalMethod = () => {
  console.log('This method is not exposed');
};

// 使用 setup 的 expose 参数来明确暴露出去的属性或方法
defineExpose({
  greet,
});
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

在这个例子中，我们并没有显式地调用 onMounted 或者使用 $expose，而是直接在 setup 函数中通过 defineExpose 来指定哪些内容应该被暴露出去。这种方式简化了代码，并且与 <script setup> 语法非常契合。

对于不使用 <script setup> 的情况，即传统写法的单文件组件（SFC），setup 函数也可以接收第三个参数，它是一个对象，包含了 attrs、slots、emit 和 expose 等属性。你可以像下面这样使用 expose：

export default {
  setup(props, { attrs, slots, emit, expose }) {
    const message = ref('Hello from child component!');
    const greet = () => {
      console.log(message.value);
    };

    // 暴露方法给父组件
    expose({
      greet,
    });

    return {
      // 返回给模板的内容，不会全部暴露给父组件
      greet,
      // ...其他返回值
    };
  },
};

在这个例子中，expose 是作为 setup 函数第二个参数对象的一部分传递进来的。我们通过调用 expose 并传入一个对象来定义哪些属性或方法应该暴露给父组件。这种方式适用于不使用 <script setup> 的场景，并且提供了清晰的方式去管理哪些内容应该被外部访问。

无论你选择哪种方式，使用 setup 函数的 expose 参数或 defineExpose 编译器宏都可以帮助你精确控制组件的公开接口，同时保持良好的开发体验和类型安全。