捆绑VueJS组件以使用相同的数据

Question

我试图弄清楚如何捆绑一些使用相同数据的组件（来自API），所以我只需要打一个电话。我现在正在学习VueJS，不知道这是否可行或如何调用。所以基本上我要存档的是这个

创建一个index.js文件，该文件从API获取数据并捆绑使用该数据（或其中的一部分）的组件。

使用import {subComponent} from '@/components/bundle/'从该捆绑软件中获取特定组件，同时使用index.js传递的数据

这可能吗？可能这很常见，但我不知道它叫什么。我怎么能意识到这一点？

到目前为止，我已经尝试过：

view.vue ：

<template>
    <subComponent1/>
</template>
<script>
import {subComponent1} from '@/components/bundle';

export default {

    name: 'view',
    components: {
        subComponent1
    },

</script>

index.js （在components/bundle/中）：

<script>
import subComponent1 from './subComponent1'
import subComponent2 from './subComponent2'

export {
    subComponent1 ,
    subComponent2 
}

</script>

这些组件是标准的单文件组件，尚不使用来自index.js的数据，但是我已经遇到了此错误：

我在做什么错了？