Vue 动态组件

is 属性指定组件名
首先引入所有动态组件并进行局部组件注册,然后动态指定组件的名字即可实现动态组件的切换

<component :is="componentName"></component>

extend 创建动态组件

// 动态组件, 再也不用import引入一堆的组件然后进行切换了
    getComponent(name) {
      import(`../components/${name}.vue`).then(component => {
        // component 包裹在defualt内
        const Component = Vue.extend(component.default)
        new Component({
          el: this.$refs.dynamic_component, // 挂载的DOM节点
          data: { // 传参
            name: this.name
          }
        })
      })
    }

extend的使用
extend其实上是构造器,所以使用的时候需要new实例化,然后设置挂载节点el或者借助$mount() 进行挂载。

const globalComponent = Vue.extend({
  template: '<p>{{name}}</p>',
  data: function() {
     return {
       name: '构造器-注册全部组件'
     }
  }
});
// 全局注册
// Vue.component('global-component', globalComponent)

// 局部注册包含两种方式进行挂载 el 和 $mount()
// new globalComponent().$mount("#mount-point")
//new globalComponent({ el: this.$refs.mount_point})
上一篇:16 new Vue({ render: h => h(App), }).$mount('#app')


下一篇:磁盘管理