vue组件化-容器

<template>
  <div :key="mkey">
    <component v-for="(data,k) in cardMap[mkey]" :is="data.card_type" :card="data" :key="k"></component>
  </div>
</template>
<script>
  //公共部分
  import ‘../common/marvel.css‘;
  const cardSync={
    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={};
  Bus.addCardByData = function (data,mkey=‘mv‘) {
    if(!Bus._cardMap[mkey]){Bus._cardMap[mkey]=[]}
    Vue.component(data.card_type, cardSync[data.card_type]);
    Bus._cardMap[mkey].push(data);
  };

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

<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>