Vue3中简单书写JSX组件

目录

前言

使用步骤

        1.下载JSX的插件

        2.在vite.config.js中引入插件

        3.可以使用JSX了

补充

---

前言

突发奇想学习下vue3中的JSX，但是呢上网搜了一下内容，都对新手不怎么友好。所以自己写了一个简略的JSX的用法介绍吧。

官方网站里也提供了用法介绍

官网链接：vite-plugin-vue/packages/plugin-vue-jsx at main · vitejs/vite-plugin-vue · GitHub 

使用步骤

1.下载JSX的插件

 vue3中的JSX是使用插件@vitejs/plugin-vue-jsx  来支持JSX写法的。

下载插件，插件安装到开发环境中：

npm install @vitejs/plugin-vue-jsx -D

2.在vite.config.js中引入插件

在项目的目录下，找到vite,.config.js文件，在文件中引入JSX的插件 

 代码如下（示例）：

//1.import引入
import vueJsx from "@vitejs/plugin-vue-jsx"


export default defineConfig({
  plugins: [
    vue(),
    vueJsx()     //2.在plugins中执行一下JSX的插件
  ],       
})

3.可以使用JSX了

(1)新建一个.jsx后缀的文件,里面使用JSX来写组件

注意：JSX需要借助于的defineComponent函数来写。

官网中提供了好几种写法，有兴趣的可以去上面的官网链接进去看看。

我自己创建的.jsx格式的文件名是： A.jsx

我是在A.jsx中这样写：  

import { defineComponent } from 'vue'

export default defineComponent({
    render() {
        return <div>
            我是一个jsx中的div
            <p>我是一个p结点</p>
        </div>

    }
})

在defineComponent函数中，我用了选项式的render函数来写，也可以在setup函数中直接返回箭头函数：

import { defineComponent } from 'vue';

export default defineComponent({
    setup() {
            //返回的结点中有一个根结点，多个根节点时用数组包裹
        return () => <div>
                        我是一个jsx中的div
                        <p>我是一个p结点</p>
                    </div>
    }
})

注意：return返回的是根结点，上面只有一个根节点，多个根节点时使用数组包裹。

(2)在App.vue中的script标签中引入组件：

<script setup>
import Ajsx from "./components/A.jsx";

</script>

在App.vue的template中直接使用刚刚引入的组件Ajsx 

</template>
    <Ajsx> </Ajsx>

<template>

 浏览器页面：

简单的JSX组件的创建和使用完成！ 

补充：

关于vue3中的更多的JSX的语法格式，可以去vue3的官网，官网提供了vue3中语法的各种模板，v-if、v-for等。vue.js官网的进阶主题下的渲染函数&JSX里面，万一下面的链接打不开，手动去官网找。

链接放这里：渲染函数 & JSX | Vue.js