vue中动态插入组件

vue中动态插入组件

在 vue 项目中，初始化的根实例后，组件j都是通过 import 来进行局部注册，所以组件的创建不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：

组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？
这时候，Vue.extend + vm.$mount 组合就派上用场了。

动态加载渲染组件

1.创建构造器

import UserbdList from "./userbd-list.vue";
const UserbdListConstructor = Vue.extend(UserbdList);


或者
const UserbdListConstructor  = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})

2.创建实例，并将组件挂载到对应的dom上

insertDom(option = {}) {
      let $vm;
      if (!$vm) {
        let domlist = $(`.dt-post-list-item-${option.index} .card-box`);
        let dom = ""
        let ishowbottomDivider = true
        if (domlist.length >= 5) {
          dom = domlist[4]
        } else {
          dom = domlist[domlist.length - 1]
          ishowbottomDivider = false
        }
        // 将组件挂载到对应的dom上
        // 方法一
        $vm = new UserbdListConstructor().$mount(dom);
        // 方法二
        // $vm = new UserbdListConstructor({
        //   el: dom,
        // });
        $vm.TDXID = option.TDXID;
        $vm.type = option.index;
        $vm.ishowbottomDivider = ishowbottomDivider;
      }
    },
insertDom_gxbList(index) {
      this.insertDom({
        index: index,
        TDXID: this.TDXID,
      });
    },

3.实例效果
本实例在列表中对应位置插入相应的组件，效果图如下