vue2 升级 vue3：this.$createElement is not a function—动态组件升级

2022 年 6 月 21 日
本文字数：1630 字
阅读完需：约 5 分钟

this.$createElement

vue2 动态组件加载，this.$createElement 非常好使！比如：

import { Component as tsc } from 'vue-tsx-support';import { Component,Prop } from 'vue-property-decorator';const chartPanel = ()=>import('line-chart')@Componentexport default class Demo extends tsc<{}> {    @Prop({ required: true, type: Object }) readonly panel;    chartData    render(){        return this.$createElement(chartPanel, {            props: {                panelModel: this.panel,                chartData: Object.freeze(this.chartData),            },        });    }}

复制代码

了解 vue.$createElement

// @returns {VNode}createElement(  // {String | Object | Function}  // 一个 HTML 标签名、组件选项对象，或者  // resolve 了上述任何一种的一个 async 函数。必填项。  'div',   // {Object}  // 一个与模板中属性对应的数据对象。可选。  {    // (详情见下一节)  },   // {String | Array}  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，  // 也可以使用字符串来生成“文本虚拟节点”。可选。  [    '先写一些文字',    createElement('h1', '一则头条'),    createElement(MyComponent, {      props: {        someProp: 'foobar'      }    })  ])

复制代码

更多推荐阅读：vue.$createElement 的使用实例 https://juejin.cn/post/6969505687114088484

那么 vue3 怎么弄呢？

看下官方文档：https://vuejs.org/guide/extras/render-function.html#basic-usage

import { defineComponent, h } from 'vue';
import Panel from '@/plugins/charts/pie-charts/components/chart-panel';export default defineComponent({  name: 'ChartWrap',  setup() {    const vnode = h(Panel, { m: 222 });    return () => (      <div>        <div>title</div>        {vnode}      </div>    );  },});

复制代码

但是，如果是异步组件

const asyncPage = () => import('./Lazy.vue')

复制代码

this.$createElement 还是没有问题的，但是 vue3，这个没有法子，但是 vue3 有 defineAsyncComponent 方案，具体查看下一章：vue2升级vue3：异步组件defineAsyncComponent》

异步组件导出：

import pieChartJson from './pie-charts/plugin.json';import pieChartLogo from './pie-charts/img/logo.svg';import pieChart from './pie-charts/index';export const ChartSourceBuildIn = {  [pieChartJson.type]: pieChart,};export const ChartSourceImgBuildIn = {  [pieChartJson.type]: pieChartLogo,};

复制代码

加载异步组件：

import { defineComponent, h } from 'vue';import { ChartSourceBuildIn } from '@/plugins/charts/index';export default defineComponent({  name: 'ChartWrap',  setup() {    const chart = ChartSourceBuildIn['pie-charts'];    const { ChartPanel } = chart;    const vnode = h(ChartPanel, { m: 222 });    return {      vnode,    };  },  render() {    return (      <div>        <div>title</div>        {this.vnode}      </div>    );  },
});