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')
@Component
export 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>
);
},
});
这个和vue2的方案基本保持一致
转载本站文章《vue2升级vue3：this.$createElement is not a function—动态组件升级》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8850.html
