将子组件的数据加载提升到父组件？

Question

有一个页面，页面需要根据参数动态组合组件，最终形成展示. 示例

<template><!-- 企业信息 -->
  <div>
    <div v-for="(item,index) in corpInfoStepList" :id="item.names" :key="index" :ref="item.names">
       <component :is="item.key" :ref="item.key" />
     </div>
   </div>
</template>

组合的组件都在corpInfoStepList数组中.

现在有个需求：组件数组中:a,b请求同一个api地址(API.d)。希望把这个api的请求放到页面中进行(GET查询).以此达到减少网络请求的目地.

vue有什么机制实现. prop不在考虑之内：因为有的组件是不需要:API.d

Answer 1

page页面

<template><!-- 企业信息 -->
  <div>
    <div v-for="(item,index) in corpInfoStepList" :id="item.names" :key="index" :ref="item.names">
    // 方案1
       <component
        :is="item.key"
        @sendRequest="handleABSend"
        :apiRes=" item.key == a || item.key == b ? requestData : null "
        />
     </div>
   </div>
</template>
<script>
    import emitter from "@/utils/eventHub";
    //方案1 
    const handleABSend = () => {
        // 获取数据方法
        if (res.data) {
            this.requestData = res.data;
        }
    };
    ... //方案2
    emitter.on("sendRequest", () => {
        // dosomething 
    });
    const sentRequest = () => {
        // 获取数据方法
        if (res.data) {
            emitter.on("gotRes", res.data);
        }
    };
    ...
</script>

a b内

<script>
    import emitter from "@/utils/eventHub";
    // 方案1
    props: {
        apiRes: {
            requied: true,
            default () {
                return {}
            },
        },
    },
    ... // 方案2
    emitter.on("gotRes", (data) => {
        // 拿到数据处理逻辑 
    });
    ...
</script>

新建一个 eventHub.js

const Emitter = require("tiny-emitter");
const emitter = new Emitter();
export default emitter