vue3 tsx class

在Vue 3中，可以使用TSX（TypeScript JSX）语法来编写组件。TSX是一种将HTML和JavaScript结合在一起的语法，它允许我们在Vue组件中使用类似于React的写法。

下面是一个使用Vue 3和TSX编写的简单示例：

// MyComponent.tsx
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    pageTitle: {
      type: String,
      required: true
    }
  },
  setup(props, { emit }) {
    const updatePageTitle = (newValue: string) => {
      emit('update:pageTitle', newValue);
    };

    return () => (
      <div>
        <h1>{props.pageTitle}</h1>
        <button onClick={() => updatePageTitle('New Title')}>Update Title</button>
      </div>
    );
  }
});

在上面的示例中，我们使用`defineComponent`函数定义了一个名为`MyComponent`的组件。组件接收一个名为`pageTitle`的属性，并在模板中显示该属性的值。当点击按钮时，会调用`updatePageTitle`方法，并通过`emit`函数触发`update:pageTitle`事件，将新的标题值传递给父组件。

请注意，为了使用TSX语法，我们需要安装`@vue/babel-plugin-jsx`插件，并在Babel配置中进行相应的设置。