• home > webfront > ECMAS > vue3 >

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

    Author:zhoulujun Date:

    ue2 动态组件加载,this $createElement非常好使!return this $createElement(chartPanel, {props:{}}),但是到vue3如何操作呢?


    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