接口重复请求问题

在父组件不同位置调用了子组件，子组件在初始化阶段调用接口请求数据。出现接口重复请求问题：

<--父组件-->
<template>
  <div>
    <configDialog />

    <el-table :data="ruleList">
      <el-table-column fixed="right" label="操作" align="center" width="100">
        <template slot-scope="scope">
          <configDialog />
          <el-button type="text" size="mini" @click="deleteRule(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import configDialog from './configDialog.vue';
export default {
  components: {
    configDialog
  },
  created() {
    // 请求接口
  }
  ……
};
</script>

<--子组件-->
<template>
  <div>
    <el-button v-if="!isEdit" type="primary" @click="handleOpen">新增配置</el-button>
    <el-button v-else type="text" size="small" @click="handleOpen">修改</el-button>
    <el-dialog> …… </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    // 请求接口
  }
  ……
};
</script>

第一次修改为，使用watch监听子组件弹窗的开闭情况。（存在问题：弹窗反复打开时，每次打开会请求接口）

watch: {
  isVisible(val) {
    if (val) {
      // 请求接口
    }
  }
}

优化思路：在父页面中请求弹窗数据接口，并传值给弹窗组件，避免多次请求。

总结：在页面中需要调用弹窗的情况下，之前的写法：在弹窗组件里调用所需接口获取数据，产生问题：弹窗被重复调用或打开时，会造成接口重复请求。可优化：在页面中请求弹窗数据接口，并传值给弹窗组件。