今天在做项目的时候遇到一个很麻烦的事情，就是一个页面有10多个类似的弹窗，而这样的页面不下于10个，这意味着光调用弹窗，我就得处理100多次，首先，一个页面涉及到按钮组10多个，页面中调用这些组件也是10多个，script里面加载组件还是10多个，然后data里面数据监听他们的状态也需要10多个变量，watch里面关于显隐的监听也是10多次，如果用这种模式来写的话，我差不多需要写500多次关于这些组件的调用，而且这么多次调用，在后期会产生很严重的维护问题，以及BUG很难处理的问题。那么一个页面我可不可以只定义一个数据源，然后其他操作全部围绕这个数据源进行，经过4-5个小时的不断试坑，终于在定义一个数据源的基础上能在这个页面上实现上述五个功能。记录一下这段代码，以后会用得着的。

代码示例如下：

<template>
  <div class="channel_main">
    <el-button v-for="(item, english) in compJSON" @click="showLayer(english)">
      {{ item.name }}
    </el-button>
    <!-- 弹窗的导入 -->
    <component v-for="(item, english) in compJSON" :is="english" :layer="item.layer" />
  </div>
</template>

<script>
  // 大量弹窗组件同时引入时的使用策略
  const compJSON= {
    'newLayer': { name: '新建', layer: { show: false } },
    'importLayer': { name: '导入', layer: { show: false } },
    'exportLayer': { name: '导出', layer: { show: false } },
    'publishLayer': { name: '发布', layer: { show: false } },
    'checkLayer': { name: '校验', layer: { show: false } },
    'delLayer': { name: '删除', layer: { show: false } },
    'synmodelLayer': { name: '同步模板附件', layer: { show: false } },
    'assignbatLayer': { name: '批量分配', layer: { show: false } },
  }
  // 需要额外定义的组件请放置于此
  let components = {

  }
  // 需要额外定义的data数据请放置于此
  let data = {
    compJSON,
    show: false,
    allChecked: false,
    input3: '',
    select: ''
  }
  // 此函数用于处理数理至data中及components中
  function getComp() {
    for (let i in compJSON) {
      components[i] = () => import('./layer/' + i)
    }
  }
  getComp()
  // 策略结束
  export default {
    components: components,
    data() {
      return data
    },
    methods: {
      // 所有弹窗之前进入的判断组件事件
      showLayer(key) {
        this.compJSON[key].layer.show = true
      }
    } 
  }
</script>