vue3 tsx

作者：木齵乄语发布日期:2025-09-04 浏览:51

// Vue 3 with TSX Example

import { defineComponent, h } from 'vue';

interface MyComponentProps {
  message: string;
}

const MyComponent = defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    return () => (
      <div class="my-component">
        <h1>{props.message}</h1>
      </div>
    );
  }
});

export default MyComponent;

// 解释说明：
// 1. 使用 `defineComponent` 和 `h` 函数从 Vue 导入。
// 2. 定义了一个接口 `MyComponentProps` 来声明组件的属性类型。
// 3. 使用 `defineComponent` 创建一个 Vue 组件，并定义了 `message` 属性。
// 4. 在 `setup` 函数中返回一个渲染函数，使用 JSX (TSX) 语法来创建虚拟 DOM。
// 5. 使用 `{props.message}` 插值表达式将属性值插入到模板中。

上一篇：vue上传文件到后端

下一篇：vue3setup语法糖