vue3使用jsx开发

基础框架：vite+vue3

1. 安装@vitejs/plugin-vue-jsx

2. 修改vite.config.js

import vue from '@vitejs/plugin-vue'
import vuejsx from "@vitejs/plugin-vue-jsx"
export default defineConfig({
  plugins: [
    vue(),
    vuejsx()
    ]
})

如果不做上述处理，直接使用jsx开发的话，浏览器就会提示：

React is not defined

我是写的vue啊，提示我react哈哈哈。

然后我们就可以像react hook一样开发组件了：

新建：component.jsx组件

const component = (props,context) => {
  return <div
    style={{
      fontSize:12,
      color: '#999'
    }}
  >
    我是jsx函数组件
  </div>
}

export default component

{attrs, emit, slots} = context

父组件：

<template>
  <div class="home">
    父组件
    <comp>comp>
  div>
template>

<script setup lang="ts">
import comp from '@/components/com.jsx'

script>

<style lang="less" scoped>
style>

props参数：

直接在依然是模板语法一样的写法：

<comp text="2233">comp>

jsx组件中接收：

const component = (props,context) => {
  console.log(props) // {text: '256', __vInternal: 1}
  return <div
    style={{
      fontSize:12,
      color: '#999'
    }}
  >
    我是jsx函数组件{props.text}
  </div>
}

export default component

子组件emit：

const component = (props:props,context:context) => {
  console.log(props)
  const onClick = () => { 
    context.emit('update')
  }
  return <div
    style={{
      fontSize: 12,
      color: '#999'
    }}
    onClick={()=>onClick()}
  >
    我是jsx函数组件{props.text}
  </div>
}

export default component

父组件接收：

<template>
  <div class="home">
    父组件
    <comp text="256" @update="compUpdate">comp>
  div>
template>

<script setup lang="ts">
import comp from '@/components/com.tsx'
const compUpdate= () => {
  console.log('compUpdate')
}
script>