vue组件化-容器

container.vue

<template>
  <div :key="mkey" :path="mkey">
    <component v-for="(data,k) in cardMap[mkey]" :is="data.card_type" :card="data" :key="k*100+data.key" :path="k"></component>
  </div>
</template>
<script>
  //一个容器包含所有的组件
  import '../common/marvel.css';
  const cardSync={
    card9_img:r => require.ensure([], () => r(require("../components/cards/card9_img.vue"))),
    card20_img:r => require.ensure([], () => r(require("../components/cards/card20_img.vue"))),
    card21_img:r => require.ensure([], () => r(require("../components/cards/card21_img.vue"))),
    card25_img:r => require.ensure([], () => r(require("../components/cards/card25_img.vue"))),
    card31_img:r => require.ensure([], () => r(require("../components/cards/card31_img.vue"))),
    card32_img:r => require.ensure([], () => r(require("../components/cards/card32_img.vue"))),
    card33_img:r => require.ensure([], () => r(require("../components/cards/card33_img.vue"))),
    card2008_img:r => require.ensure([], () => r(require("../components/cards/card2008_img.vue"))),
    card3001_img:r => require.ensure([], () => r(require("../components/cards/card3001_img.vue"))),

    card1:r => require.ensure([], () => r(require("../components/cards/card1.vue"))),
    card2:r => require.ensure([], () => r(require("../components/cards/card2.vue"))),
    card3:r => require.ensure([], () => r(require("../components/cards/card3.vue"))),
    card7:r => require.ensure([], () => r(require("../components/cards/card7.vue"))),
    card8:r => require.ensure([], () => r(require("../components/cards/card8.vue"))),
    card9:r => require.ensure([], () => r(require("../components/cards/card9.vue"))),
    card10:r => require.ensure([], () => r(require("../components/cards/card10.vue"))),
    card11:r => require.ensure([], () => r(require("../components/cards/card11.vue"))),
    card13:r => require.ensure([], () => r(require("../components/cards/card13.vue"))),
    card14:r => require.ensure([], () => r(require("../components/cards/card14.vue"))),
    card20:r => require.ensure([], () => r(require("../components/cards/card20.vue"))),
    card21:r => require.ensure([], () => r(require("../components/cards/card21.vue"))),
    card22:r => require.ensure([], () => r(require("../components/cards/card22.vue"))),
    card23:r => require.ensure([], () => r(require("../components/cards/card23.vue"))),
    card24:r => require.ensure([], () => r(require("../components/cards/card24.vue"))),
    card25:r => require.ensure([], () => r(require("../components/cards/card25.vue"))),
    card26:r => require.ensure([], () => r(require("../components/cards/card26.vue"))),
    card28:r => require.ensure([], () => r(require("../components/cards/card28.vue"))),
    card29:r => require.ensure([], () => r(require("../components/cards/card29.vue"))),
    card30:r => require.ensure([], () => r(require("../components/cards/card30.vue"))),
    card31:r => require.ensure([], () => r(require("../components/cards/card31.vue"))),
    card32:r => require.ensure([], () => r(require("../components/cards/card32.vue"))),
    card33:r => require.ensure([], () => r(require("../components/cards/card33.vue"))),
    card100:r => require.ensure([], () => r(require("../components/cards/card100.vue"))),
    card200:r => require.ensure([], () => r(require("../components/cards/card200.vue"))),
  };

  import Vue from 'vue'
  import Bus from './bus';

  /*
    增加服务的接口
  * */
  Bus._cardMap={};
  const onceData={}
  Bus.addCardByData = function (mkey='mv',data,index) {
    if(!Bus._cardMap[mkey]){Bus._cardMap[mkey]=[]}
    if(typeof data.key==='undefined'){
      data.key=0;
    }
    if(typeof index==='undefined'){
      Bus._cardMap[mkey].push(data);
    }else{
      Bus._cardMap[mkey].splice(index,0,data);
    }

    if(!onceData[data.card_type]){
      onceData[data.card_type]=true;
      Vue.component(data.card_type, (Bus.env==='admin'&&cardSync[data.card_type+'_img'])||cardSync[data.card_type]);
    }

  };

  export default {
    name: 'modal',
    data: function () {
      if(!Bus._cardMap[this.mkey]){Bus._cardMap[this.mkey]=[]}
      return {
        "cardMap": Bus._cardMap
      }
    },
    props: ['mkey'],
    created(){}
  };
</script>

demo

<template>
  <container mkey="mv"></container>
</template>

<script>

  import cardsDic from "../components/cardsDic.js";
  import Bus from '../marvel/bus';
  export default {
    components:{
      container:require("../marvel/container.vue")
    },
    created(){
      for(let i=0;i<cardsDic.data.length;i++){
        const cardName=cardsDic.data[i].card_type
        Bus.addCardByData(cardsDic.getCardData(cardName),'mv')
      }
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" type="text/css" rel="stylesheet/scss">

</style>