Vue3 第十一篇：集成JSX

1.安装依赖

yarn add @vitejs/plugin-vue-jsx

2.配置插件：在vite.config.js加入jsx配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
 
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


import vueJsx from '@vitejs/plugin-vue-jsx'

const path = require('path');
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    WindiCSS(),
    vueJsx(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    // 配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${path.resolve("src/assets/css/base.less")}";`,
        },
        javascriptEnabled: true,
      },
    },
  },
})

3.配置编译：修改tsconfig.json或者jsconfig.json，加入以下三项配置

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "types": [
      "element-plus/global"
    ],
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "node_modules"
  ]
}

4.使用：

在components文件夹下新建文件test.jsx，内容如下：

（注意注意注意：jsx组件一定要用大写字母开头来命名，以便以能够相互引用！！！，其且jsx是不需要插槽的，因为组件本身就可以当做参数传入传出；例子，贴在了最后）

export const MyButton = () => {
    return (
        <>
            <button>这是一个按钮</button>
        </>
    )
}

export const MyInfo = () => {
    return (
        <>
            <div style="color:blue">
                这是一段信息
            </div>
        </>
    )
}

然后去HelloWorld.vue中引入并使用

效果如下（App.vue中我把Logo去掉了）：

作者在写作过程中出现了两个问题：

1.双向绑定不生效，原因是没有把js内容用{}包起来。

2.在jsx组件中的elementplus的样式不生效，原因是在main.js中只引入element-plus，忘了引入element-plus/dist/index.css。

5.相互引用的示例：

function Parent(props) {
    const type = 100
    return (
        <>
            <el-button>父按钮</el-button>
            {/* 这里引用了下面的子组件,并把孙组件当做参数传给了子组件 */}
            <Son Com={Children}></Son>
        </>
    )
}

function Son(props) {
    const { Com } = props
    return (
        <>
            <el-button>子按钮</el-button>
            <Com></Com>
        </>
    )
}

function Children() {
    return (
        <>
            <el-button>孙按钮</el-button>
        </>
    )
}

export default Parent

6.注意注意注意注意注意注意，这个坑是比较大的，单独作为一栏来说一下：

当有一天你的函数发生了莫名其妙的触发...反复的触发！！！

onClick绑定请使用箭头函数。【建议所有的触发动作，都用箭头函数绑定】