vue中使用jsx

// 在 Vue 中使用 JSX 的示例代码

<template>
  <div id="app">
    <!-- 这里是普通的 Vue 模板 -->
    <MyComponent />
  </div>
</template>

<script>
import MyComponent from './components/MyComponent';

export default {
  components: {
    MyComponent
  }
};
</script>

// 下面是 MyComponent.vue 文件的内容，使用 JSX 语法编写

<script>
import { defineComponent, h } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    return () => (
      <div class="jsx-component">
        <h1>Hello JSX in Vue!</h1>
        <p>This is a paragraph inside a JSX component.</p>
      </div>
    );
  }
});
</script>

<style scoped>
.jsx-component {
  border: 1px solid #ccc;
  padding: 16px;
}
</style>

解释说明：

1. 模板部分：在 template 中，我们像往常一样定义了一个普通的 Vue 组件，并引入了使用 JSX 编写的 MyComponent。

2. JSX 部分：在 MyComponent.vue 文件中，我们使用了 Vue 3 提供的 defineComponent 和 h 函数来创建一个组件。setup 函数返回一个渲染函数，该函数使用 JSX 语法返回虚拟 DOM 结构。

3. 样式部分：在 style 标签中，我们为 JSX 组件添加了一些简单的样式。

通过这种方式，你可以在 Vue 项目中使用 JSX 语法编写组件，享受 JSX 带来的灵活性和便利性。