vue组件动态插入、vue组件按需插入显示、vue组件动态显示-蒲公英云

vue组件动态插入、vue组件按需插入显示、vue组件动态显示

快来打我* 2023-06-06 03:57 57阅读 0赞

-——————————————————————————

qq群（vue学习交流）：482739794

-——————————————————————————

先来说下项目需求：

页面的组件不是直接引入且按照顺序放在页面上的，
而是根据后端返回的数据，来判断，动态的加载某个组件

思路步骤：

引入组件

import TabNew from ‘./TabNew.vue’

注册组件

components: {
‘v-TabNew-2’: TabNew

}

插入组件

itemList.push({
component: ‘v-NewHomeAd-1’,
classname: ‘’,
vIf: adverArr ? true : false,
data: adverArr
})

通过 :is 动态绑定组件

代码展示：

（常见的直接将组件按照位置放在页面上，一般我们都是这样写的）

<template>
  <div id="home_new">
    <!-- 查询话费、流量 -->
    <v-TelePhoneBill />
    <!-- tabNew栏 -->
    <v-TabNew-2 class="tab_top" :tabNew='tabNewArr' v-if="tabNewArr" />
    <!-- 专区 -->
    <v-SpecialArea-3 class="special_top" :specialNew="specialArr" v-if="specialArr.length!=0" />
    <!-- 广告 -->
    <v-NewHomeAd :adver="adver" v-if="adverArr" />
  </div>
</template>

（根据后端返回的值，动态的加载组件）

<template>
  <div id="home_new">
    <component :is="item.component" v-if="item.vIf" :data="item.data" :class="item.classname" v-for="(item,index) in itemList"
      :key="index"></component>
  </div>
</template>
<script> 
// 引入需要的组件
import TabNew from './TabNew.vue'
import SpecialArea from './Card/SpecialArea'
import TelePhoneBill from './TelePhoneBill'
import NewHomeAd from './Advertise/NewHomeAd'
export default {
    data() {
      return {
        current: "",
        msg: "",
        locationCity: '',
        // tabNewArr: '', // tabnew栏
        // specialArr: [], //专区
        cityLocation: '', // 选择地区
        // adverArr: '', // 广告
        cityTxt: '选择地区',
        currentCity: '', // 城市
        provinceCode: '', // 城市编码
        itemList: [],
        adList: ''
      }
    },
// 注册组件
    components: {
      'v-TabNew-2': TabNew,
      'v-SpecialArea-3': SpecialArea,
      'v-TelePhoneBill-4': TelePhoneBill,
      'v-NewHomeAd-1': NewHomeAd
    },
    methods:{
      getData() {
        var that = this;
        var url = "/v1/index/getIndexPageInfo.do";
        var params = {
          provinceCode: that.cityLocation.id || that.provinceCode // 省份code  北京的
        };
        that.httpRequest(url, params)
          .then(res => {
            var res = res.data;
            console.log('====首页接口的success', res.success);
            if (res.success) {
              console.log("首页请求成功", res);
              // 专区
              let special1, special2, special3, specialArr1 = [],
                specialArr2 = [],
                specialArr3 = [],
                typeList = [],
                obj = {},
                itemList = [];
              for (var i in res.body) {
                obj[res.body[i][0].type] = i; // 设置对象，为了在switch后面用到索引
                console.log('设置的对象', obj);
                var item = res.body[i][0].type;
                switch (Number(item)) {
                  case 1:
                    console.log('111')
                    let adverArr = res.body[item] // 广告
                     // 动态插入组件
                    itemList.push({
                      component: 'v-NewHomeAd-1',
                      classname: '',
                      vIf: adverArr ? true : false,
                      data: adverArr
                    })
                    break;
                  case 2: // tab栏
                    console.log('222')
                    let tabNewArr = res.body[obj[item]] // tab栏显示
                    itemList.push({
                      component: 'v-TabNew-2',
                      classname: 'tab_top',
                      vIf: tabNewArr ? true : false,
                      data: tabNewArr
                    })
                    break;
                  case 3: // 专区
                    console.log('333')
                    special3 = res.body[item] // 携号转网
                    special1 = res.body[item] // 宽带专区
                    special2 = res.body[item] // 号卡专区
                    //专区 得存在一个数组里面 specialArr
                    special1.map((item) => {
                      specialArr1.push(item)
                    })
                    special2.map((item) => {
                      specialArr2.push(item)
                    })
                    special3.map((item) => {
                      specialArr3.push(item)
                    })
                    let specialArr = [];
                    specialArr.push(specialArr1, specialArr2, specialArr3)
                    itemList.push({
                      component: 'v-SpecialArea-3',
                      classname: 'special_top',
                      vIf: specialArr.length !== 0 ? true : false,
                      data: specialArr
                    })
                    break;
                  case 4: // 话费显示
                    console.log('4444')
                    // itemList.push({
                    //   component: 'v-TelePhoneBill-4',
                    //   classname: '',
                    //   vIf: true,
                    //   data: ''
                    // })
                    break;
                  case 5:
                    console.log('555')
                    break;
                }
              }
              that.itemList = itemList;
              console.log('that.itemList', that.itemList);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }