Vue 3 中，使用 TSX 编写动态组件

一、

在 Vue 3 中，使用 TSX 编写动态组件可以通过 is 属性来实现。例如：

import { defineComponent } from 'vue'

const App = defineComponent({
  data() {
    return {
      currentTab: 'Tab1'
    }
  },
  render() {
    const tabs = ['Tab1', 'Tab2', 'Tab3']

    // 根据 currentTab 渲染不同的子组件
    return (
      <div>
        {tabs.map(tab => (
          <button key={tab} onClick={() => this.currentTab = tab}>
            {tab}
          </button>
        ))}
        <component is={this.currentTab}></component>
      </div>
    )
  }
})

export default App

在上面的例子中，根据 this.currentTab 的值动态渲染了不同的子组件，使用了 <component> 标签，并且通过 is 属性来指定子组件的名称，这里使用了 this.currentTab 的值作为组件名称。

注意事项：

• 使用 is 属性动态渲染子组件时，组件名称必须是字符串类型。
• 如果子组件是全局组件，需要在 <component> 标签外使用 import 或 require 将该组件导入。如果是局部组件，可以直接在当前组件内定义即可。

二、

在 Vue3 中使用 TSX 编写动态组件需要注意以下几点：

1. 引入 `defineAsyncComponent` 函数：这个函数可以异步加载组件，使用时需要在组件名称前加上 `() => import('组件路径')`，例如 `defineAsyncComponent(() => import('@/components/HelloWorld'))`

2. 使用 `defineComponent` 定义组件：使用 `defineComponent` 函数来定义组件，需要传入一个对象，其中包含组件的属性和方法

3. 使用 `h` 函数创建组件：在 TSX 中，使用 `h` 函数来创建组件，需要传入组件名称和组件的属性，例如 `<HelloWorld msg="Hello Vue 3 + TSX + Vite" />`

以下是一个使用 TSX 编写动态组件的示例代码：

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

export default defineComponent({
  name: 'DynamicComponent',
  props: {
    component: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const AsyncComponent = defineAsyncComponent(() => import(`@/components/${props.component}`))
    return () => h(AsyncComponent)
  }
})

在上面的代码中，我们定义了一个动态组件 `DynamicComponent`，接受一个名为 `component` 的属性，表示要加载的组件名称。在 `setup` 函数中，我们使用 `defineAsyncComponent` 函数异步加载组件，并返回一个函数，该函数使用 `h` 函数创建组件并返回。

使用时，可以这样写：

<DynamicComponent component="HelloWorld" />

其中，`HelloWorld` 是要加载的组件名称。注意，在使用 `defineAsyncComponent` 函数时，需要使用箭头函数来引入组件，而不能直接使用字符串。