动态加载组件

最新推荐文章于 2024-05-06 10:59:29 发布

掉落的牙

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量60

点赞数

分类专栏：工具代码文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/bpluoxong/article/details/131202912

版权

工具代码专栏收录该内容

7 篇文章 0 订阅

订阅专栏

html

 <div >
      <keep-alive>
      <component :is="tagName"></component>
      </keep-alive>
 </div>

script

import echarts from "echarts";
import pageHead from "../components/pageHead.vue";
import rightFoot from "../components/rightFoot.vue";
import unitDetailList from "../components/unitDetail/unitDetailList.vue";
import unitDevice from "../components/unitDetail/unitDevice.vue";
import unitSpace from "../components/unitDetail/unitSpace.vue";
import unitDanger from "../components/unitDetail/unitDanger.vue";
import unitInspection from "../components/unitDetail/unitInspection.vue";
import unitPeople from "../components/unitDetail/unitPeople.vue";
import baoxianTotal from "../components/unitDetail/baoxianTotal.vue";
import weibaoTotal from "../components/unitDetail/weibaoTotal.vue";
import weibaoRecord from "../components/unitDetail/weibaoRecord.vue";
import unitVideo from "../components/unitDetail/unitVideo.vue";
import xfPower from "../components/unitDetail/xfPower.vue";
export default {
  components: {
    pageHead,
    unitDetailList,
    rightFoot,
    unitDevice,
    unitSpace,
    unitDanger,
    unitInspection,
    unitPeople,
    baoxianTotal,
    weibaoTotal,
    weibaoRecord,
    unitVideo,
    xfPower
  },

然后再data中选择一个数值作为加载参考，在改变时变更组件

  watch:{
    liIndex(val){
      switch(this.liIndex){
        case 1:this.tagName = 'unitDevice';break
        case 2:this.tagName = 'unitSpace';break
        case 3:this.tagName = 'unitDanger';break
        case 4:this.tagName = 'unitInspection';break
        case 5:this.tagName = 'unitVideo';break
        case 6:this.tagName = 'unitPeople';break
        case 7:this.tagName = 'baoxianTotal';break
        case 8:this.tagName = 'weibaoTotal';break
        case 9:this.tagName = 'weibaoRecord';break
        case 10:this.tagName = 'xfPower';break
      }
    }
  },