vue3在jsx或tsx写法中setup暴露方法给父组件

在Vue 3中，使用JSX/TSX时，你可以通过在setup函数中使用ref或reactive来创建响应式数据，并通过toRefs来暴露方法给父组件。以下是一个简单的例子：

import { defineComponent, ref, reactive, toRefs } from 'vue';
 
export default defineComponent({
  setup() {
    const count = ref(0);
    const state = reactive({
      message: 'Hello',
    });
 
    function increment() {
      count.value++;
    }
 
    function greet() {
      alert(state.message);
    }
 
    // 将响应式状态和方法通过toRefs暴露
    return {
      ...toRefs(state),
      count,
      increment,
      greet,
    };
  },
 
  // JSX 或 TSX 中的使用
  render() {
    return (
      <div>
        <p>{this.message}</p>
        <p>{this.count}</p>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.greet}>Greet</button>
      </div>
    );
  },
});

在这个例子中，count和state是响应式的，increment和greet是在setup中定义的方法。通过toRefs将它们转换为响应式引用，这样就可以在JSX/TSX模板中直接使用它们了。