VUE3 函数式组件踩坑

540 阅读1分钟

原有VUE2中开发的函数式组件,无法正常显示 通过浏览器开发者工具发现,组件没有被render函数(VUE3中叫做'h')正常构建

大致源码如下:

import {h} from "vue";
const autoInit    = ( props, context:{ slots, emit, attrs }) => {
    //需要构建的组件,已经被全局加载
    return h( props.type, context.attrs, context.slots);
}
export default autoInit;

在原有项目中定义了一个函数式组件,用于根据一个配置自动构建组件 同样的逻辑在VUE3中无法生效, 尝试了各种方法最终在官方文档中找到了答案:就在这里

image.png

也就是说VUE3版本的render函数已经不支持使用非原生的组件名称作为参数,如果是非原生组件则需要传递的是定义!