像react一样写vue函数式组件

vue3使用jsx的方式

需要安装 @vue/babel-plugin-jsx ：yarn add @vue/babel-plugin-jsx 或者 npm i @vue/babel-plugin-jsx

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuejsx from "@vue/babel-plugin-jsx"
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),vuejsx({})],
  resolve:{
    alias:{
      "@": `${path.resolve(__dirname, './src')}`
    }
  },
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: "import { h } from 'vue';"
  }
})

1. 新建Hellow.jsx组件 vue3使用jsx参考点击跳转

import { ref } from "vue";

const Hellow = (props, { slots, attrs, emit }) => {
  const asd = ref(123);
  return <div>{asd.value}</div>;
};
// 定义props特性
Hellow.props = [];
export default Hellow;

2. 用法 在App.jsx里面使用

import Hellow from "./components/hellow";

const App = (props, { slots, attrs, emit }) => {
  return <Hellow />;
};

export default App;