一、新建 src/components/ExpJsx/index.vue

二、在 src/components/index.js里面，批量注册函数式组件

export default { // 默认导出
  install (app) {
    // 1.深度查找每一项
    const requireComponet = require.context('./', true, /\.vue$/)
    // 2.循环遍历深度查找的每一项
    requireComponet.keys().forEach(item => {
      // 3.获取数组对象
      const moduleObj = requireComponet(item).default
      console.log(moduleObj, '00')
      // 4.循环注册组件
      app.component(moduleObj.name, moduleObj)
    })
  }
}

三、man.js 导入批量注册的函数式组件

import { createApp } from 'vue'
import App from './App.vue'

// 导入批量注册的函数式组件
import componentPlugins from '@/components'

// 以插件形式使用
createApp(App).use(componentPlugins).mount('#app')

四、在 ExpJsx/index.vue中书写函数式组件

<script>
// ◆函数式组件：vue 中 体验 jsx 语法
export default {
  name: 'ExpJsx',
  render () {
    const obj = { name: '小白', age: 18 }
    const lis = [
      <li>我是li1</li>,
      <li>我是li2</li>,
      <li>我是li3</li>
    ]
    const ois = [
      { name: 'jack', age: 18 },
      { name: 'rose', age: 18 },
      { name: 'tom', age: 18 }
    ]
    const fn1 = () => {
      // 调用不带括号：点击才触发
      console.log('我被点击了1！')
    }
    const fn2 = () => {
      // 调用带括号：进入页面就被触发一次(未点击)，点击不触发
      console.log('我被点击了2！')
    }
    const fn3 = () => {
      // 调用不带括号：都不触发
      console.log('我被点击了3！')
    }
    const fn4 = () => {
      // 调用带括号：点击才触发
      console.log('我被点击了4！')
    }
    return (<div>
          你好，jsx
    <p>我是{obj.name}，我今年{obj.age}</p>
    <button onClick={fn1}>按钮1</button>
    <button onClick={fn2()}>按钮2</button>
    <button onClick={() => fn3}>按钮3</button>
    <button onClick={() => fn4()}>按钮4</button>
    <ul>
      {lis}
    </ul>
    <ol>
      {ois.map(item => {
        return <li>id:{item.id}==姓名:{item.name}==年龄:{item.age}</li>
      })}
    </ol>
    </div>)
  }
}
</script>

四、全局页面即可使用,像普通组件一样 <ExpJsx></ExpJsx>