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