Vue项目 动态引入组件

最近有一个同事在问，想着就顺便发一个教程，很老的方法了。

这个非常实用，也非常简单的，看一下就会，就不多说了直接看吧

如下：

正常的组件引入大家都知道：

import InnerTab from "component/inner-tab";

动态引入就是：

// import InnerTab from "component/inner-tab";
// 通过定义一个函数的方式来引入，传入一个参数，返回组件。
const loadComponent = value => import(`./components/${value}`); 

// 上面的简写如果有看不懂的，就看下面这个，就是定义一个函数！
const loadComponent  = (value) => {
  return import(`./components/${value}`); 
}

定义一个变量，监控这个变量的变化

data() {
     return {
        activePage:'wenti', // 变量
        bottomPanel:null  // 定义组件
    }
},

当变量变化的时候：

// 监控某个变量的变化，来调用引入组件的函数
watch: {
    activePage:{
        handler(value){
            loadComponent(value).then( component => {
                this.bottomPanel = component.default;
            } );
        },
        immediate: true
    }
},

在template中使用就这样

<component :is="bottomPanel"/>

以上就是动态引入组件的教程！是不是非常简单。核心就是不直接引入组件，定义一个引入的函数，通过监控变量变化来实现动态引入赋值。

示例：

如下图，这个页面右侧上方有将近10个按钮，实际上点击整个页面直接就变了，但是因为设计需求以及后期可能会变动，就没有使用路由，暂时使用的动态改变页面使用的组件。

QQ截图20220810102302.png

代码简图

// 动态引入，传入组件名
const loadMap = name => import(`./components/${name}/bg-map`); // 地图
const loadLeft = name => import(`./components/${name}/left-panel`); // 顶部查询
const loadRight = name => import(`./components/${name}/right-panel`); // 右侧面板
// 数据 
data(){
  return {
    name:''
  }
}

// 监控你这个变量的变化
watch: {
    card: {
        handler(value) {
            loadMap(value).then(component => {
                this.bgMap = component.default;
            });
            loadLeft(value).then(component => {
                this.leftPanel = component.default;
            });
            loadRight(value).then(component => {
                this.rightPanel = component.default;
            });
        },
        immediate: true
    },
},

// 使用
<component :is="bgMap"/>
<component :is="leftPanel"/>
<component :is="rightPanel"/>

// 大概就这个意思

定义引入函数

image.png

定义变量

image.png

监控变量的变化来动态引入组件

image.png

使用组件

image.png

示例目录

image.png

以上，结束。