关于在JSX中使用vue动态组件

在实际应用场景中，我们经常会用到vue的动态组件： 当我们需要在jsx中使用动态组件的时候，很容易想当然的认为可以同样如此使用。其实不然，vue2.x版本是不支持在jsx语法中使用动态组件的，会报错。Unknown custom element: - did you register the component correctly……

错误代码示例：

import Tap from './tap.vue'
export default {
	components: {
		Tap
	},
    render(h) {
      return <component 
		is={Tap}
      />
    }
}

实际上正确的写法应该是这样：

export default {
	data() {
		return {
			componentName: () => import('./Tap.vue');
		}
	},
    render(h) {
		const CompName = this.componentName
        return <CompName />
    }
}

这是在vue2.x中的正确解决方案。

在vue3.x中，提供了在render中使用动态组件的api：h(resolveComponent(componentName)).
componentName必须在 components 中声明，否则依然无效。