Vue 动态组件渲染问题分析

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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')

        ]);

      },

    });