在TSX中玩转vue3动态组件

背景

父组件需要引入多个子组件，我们可以批量引入注册，批量渲染。

1、目录结构&动态路由

1-1、目录结构

• 结构

• 展开

2、动态引入

• 可以参考怎么动态引入组件 戳这里

2-1、代码

我这里用的vite, 所以用import.meat.glob引入。
这里注意一下，需要用到异步加载组件 defineAsyncComponent, 不然组件识别不到。

import { defineAsyncComponent } from 'vue'
// 动态引入4个组件
const ms = import.meta.glob('./**.tsx')
let modules: any = {}
Object.keys(ms).forEach((key) => {
  const index = key.split('/')[1] // 这里根据自己目录情况所操作
  modules[index] = defineAsyncComponent(ms[key]) // 异步加载组件
})

2-2、组件内容打印

2-3、注册组件

const RightToolBar = defineComponent({
  name: 'rightToolbar',
  components: {
    ...modules
  },
  setup() {}
}

3、动态组件的批量渲染

1、在模板语法中 我们直接用comoponent就行，在tsx中我们需要用到resolveComponent
2、我们怎么拿到每个子组件的实例ref对象? 渲染的时候进行绑定ref并且进行赋值就好，参考如下drawers

import {
  defineComponent,
  h,
  resolveComponent,
  defineAsyncComponent
} from 'vue'

setup () {
    const componentNames = Object.keys(modules) // 拿到所有的组件名称,tsx中也能渲染中划线名称的组件
    
    // 各种子组件drawers组件实例对象
    const drawers = reactive([])

    return ()=> (
        <div>
            {componentNames.map((name, index) =>
              h(resolveComponent(name), {
                ref: (el) => {
                  drawers[name] = el
                }
              })
            )}
        </div>
    )
}