Vue 动态组件渲染问题分析

程序员文章站 2022-04-09 19:41:26

fire 读在最前面： 1、本文适用于有一定基础的vue开发者，需要了解基本的vue渲染流程 2、本文知识点涉及vue构造器以及选项策略合并、渲染逻辑问题描述： Child继承自App，主程序通过true 和false来控制显示 Child 还是 App，在动态

fire

读在最前面：

　　1、本文适用于有一定基础的vue开发者，需要了解基本的vue渲染流程

　　2、本文知识点涉及vue构造器以及选项策略合并、<component> 渲染逻辑

问题描述：

child继承自app，主程序通过true 和false来控制显示 child 还是 app，在动态<component /> 中渲染出来的始终是app，代码如下

 vue.config.productiontip = false;
    vue.config.devtools = false;

    // ----------------options---------------------
    const optionsa = {
      render: (h) => h('span', '我是options - 父'),
    };

    const optionsb = {
      render: (h) => h('span', '我是options - 子'),
    };

    const app = vue.extend({
      template: `<div>
                    当前组件： {{name}}
                    <br/>
                    <component :is="node" />
                  </div>`,
      data() {
        return {
          name: 'app',
          node: optionsa,
        }
      }
    });

    const child = app.extend({
      name: 'child',
      data() {
        return {
          name: 'child',
          node: optionsb,
        }
      }
    });

    const vm = new vue({
      el: '#app',
      data() {
        return {
          issuper: true,
        };
      },
      components: { app, child },
      render(h) {
        const that = this;
        return h('div', {}, [
          h('button', {
            on: {
              click: () => {
                this.issuper = true;
              }
            },
          }, '父类'),
          h('button', {
            on: {
              click: () => {
                this.issuper = false;
              }
            },
          }, '子类'),
          h(this.issuper ? 'app' : 'child')
        ]);
      },
    });

点击查看实例代码

如下图（点击父/子类切换，始终显示的是父文本）：

Vue 动态组件渲染问题分析