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>