vue3 jsx

作者：嗜神魔影发布日期:2026-06-25 浏览:112

// Vue 3 JSX 示例

import { h, defineComponent } from 'vue';

// 定义一个简单的组件，使用 JSX 语法
const MyComponent = defineComponent({
  setup() {
    return () => (
      <div>
        <h1>Hello, Vue 3 JSX!</h1>
        <p>This is a paragraph inside the component.</p>
      </div>
    );
  }
});

export default MyComponent;

解释说明：

导入 Vue 模块：我们从 vue 中导入了 h 和 defineComponent。h 是用于创建虚拟 DOM 节点的函数，defineComponent 用于定义 Vue 组件。
定义组件：使用 defineComponent 创建了一个名为 MyComponent 的组件。在这个组件中，我们使用了 JSX 语法来描述组件的结构。
返回 JSX：在 setup 函数中，我们返回了一个 JSX 表达式。这个表达式描述了组件的 HTML 结构，包括一个 div，其中包含一个 h1 标签和一个 p 标签。
导出组件：最后，我们将 MyComponent 导出，以便可以在其他地方使用。

通过这种方式，你可以在 Vue 3 中使用 JSX 语法编写组件，使得代码更加直观和易于理解。

上一篇：vue mixins使用

下一篇：vue 字符串转数组