vue中动态引进组件、动态引进js模块文件方式

<template>
  <div>
    <Bcomponent v-if="isShowBComponent" />
    <CComponent v-else-if="isShowCComponent" />
    <p v-else-if="isShowPage">show another something</p>
  </div>
</template>
<script>
// 直接引进来，不必要的组件也加载，造成页面体积增大
import BComponent from './b.vue'
import CComponent from './c.vue'
export default {
  data() {
    return {
      isShowBComponent: false,
      isShowCComponent: false,
      isShowPage: false,
      condition: 0
    }
  },
  components: {
    BComponent,
    CComponent
  },
  mounted() {
    this.gtDataFromInterface()
  },
  methods: {
    gtDataFromInterface() {
      // 通过接口拿到数据后，根据字段返回值，确定要展示那个组件，比如接口返回字段condition，根据它的返回值展示
      // 在这里赋值
      this.condition = condition
      this.handleShowPage()
    },
    handleShowPage() {
      if (this.condition === 1) {
        this.isShowBComponent = true
      } else if (this.condition === 1) {
        this.isShowCComponent = false
      } else {
        this.isShowPage = true
      }
    }
  }
}
</script>

<template>
  <div>
    <Bcomponent v-if="isShowBComponent" />
    <CComponent v-else-if="isShowCComponent" />
    <p v-else-if="isShowPage">show another something</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowBComponent: false,
      isShowCComponent: false,
      isShowPage: false,
      condition: 0
    }
  },
  components: {
    // 动态引进，当isShowBComponent=true的时候，才会真正加载BComponent组件文件
    BComponent: () => import('./b.vue'),
    CComponent: () => import('./c.vue')
  },
  mounted() {
    this.gtDataFromInterface()
  },
  methods: {
    gtDataFromInterface() {
      // 通过接口拿到数据后，根据字段返回值，确定要展示那个组件，比如接口返回字段condition，根据它的返回值展示
      // 在这里赋值
      this.condition = condition
      this.handleShowPage()
    },
    handleShowPage() {
      if (this.condition === 1) {
        this.isShowBComponent = true
      } else if (this.condition === 1) {
        this.isShowCComponent = false
      } else {
        this.isShowPage = true
      }
    }
  }
}
</script>

 components: {
    // 动态引进，当isShowBComponent=true的时候，才会真正加载BComponent组件文件
    BComponent: () => import('./b.vue'),
    CComponent: () => import('./c.vue')
  }

<template>
  <div>
    <Sahre  :isShow="shareData.isShow" :dataInfo="shareData.dataInfo" @click="shareData.closeEvent"/>
  </div>
</template>
<script>
export default {
  components: {
    // 动态引进组件
    Share: () => import('./share.vue')
  },
  data() {
    return {
      shareData: {
        isShow: false,         // 控制组件的显隐,
        dataInfo: {},          // 组件的数据
        closeEvent: () => {}   // 组件的关闭事件
      }
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getInitData() {
      // 通过接口拿到数据，判断是某服务，serviceName
      let flag1 = serviceName === 'daiJia'
      let flag2 = serviceName === 'battery'
      if (flag1 || flag2) {
        // 这种动态引进的方式，会返回一个Promise
        import('./share.js').then(res => {
          // share.js是默认导出，所以通过res.default拿到数据
          this.shareData = res.default
          // 根据相应的服务，调用相应的方法
          if (flag1) {
            // 这里要把组件实例传过去
            this.shareData.getSetDaiJiaData(this)
          } else if (flag2) {
            this.shareData.getSetBatteryData(this)
          }
        })
      }
    }
  }
}
</script>

export default {
  isShow: false,
  dataInfo: {},
  closeEvent: () => {
    // 注意这里要用箭头函数，才能拿到this对象，并且this指向的是该文件导出的内容，即有个default属性的对象
    // 如果用一般的声明方式，则this为null
    this.default.isShow = false
  },
  getSetDaiJiaData(vm) {
    // 通过接口那数据
    // 这里不能通过this.$store去访问，需要在调用的地方传vm进来
    vm.$store.dispatch('').then(res => {
      this.isShow = res.isShow
      this.dataInfo = res.data
    }).catch(err => {
      console.error(err)
    })
  },
  getSetBatteryData(vm) {
    // 通过接口那数据
    vm.$store.dispatch('').then(res => {
      this.isShow = res.isShow
      this.dataInfo = res.dataInfo
    }).catch(err => {
      console.error(err)
    })
},
}