Vuejs2 带有Vue选项卡的组件标签中的动态道具

我有一个自己无法解决的问题

我想用Laravel和Vue（SPA）创建一个简单的新闻门户应用程序

我有一个包含许多选项卡（Vue选项卡）的主/索引组件

在每个选项卡中，我希望根据其类别显示不同的新闻 比如健康、科技、游戏等

所以在我的App.vue中

<template>
    <div>
        <button type="button"
            v-for="tab in tabs" :key="tab"
            @click="changeTab(tab)"
        >{{ tab }}</button>
    </div>
    <div>
        <component :is="currentTab"></component>
    </div>
</template>

<script>
    import Health from '...'
    import Technology from '...'
    import Gaming from '...'
    import ...
    import ...

    export default {
        components: {
            Health,
            Technology,
            Gaming,
            ...
        },
        data() {
            return {
                currentTab: 'Health', // Starting point, (when user visit the index)
                tabs: [
                    'Health',
                    'Technology',
                    'Gaming',
                    ....
                ],
                health: [
                    // object, title, image, etc, source
                ],
                technology: [
                    // object, title, image, etc, source
                ],
                ...
            }
        },
        methods: {
            changeTab(val) {
                this.currentTab = val
            }
        }
    }
</script>

{{tab}}
从“…”导入健康
从“…”进口技术
从“…”导入游戏
导入。。。
导入。。。
导出默认值{
组成部分：{
卫生,，
技术
游戏，
...
},
数据（）{
返回{
currentTab:'运行状况'，//起点，（当用户访问索引时）
选项卡：[
"健康",，
"科技",，
"博彩",，
....
],
健康：[
//对象、标题、图像等、来源
],
技术：[
//对象、标题、图像等、来源
],
...
}
},
方法：{
更改选项卡（val）{
this.currentTab=val
}
}
}

如何使用道具将数据从该组件传递到健康、技术、游戏组件（或者其他传递方式）

//Idk如何在此组件标记内传递它们

在不知道这些组件期望其道具的结构的情况下，我建议采用如下方法：

    <component
        :is="currentTab"
        v-bind="currentProps"
    />

    ...

    computed: {
        currentProps() {
            return this[this.currentTab.toLowerCase()];
        }
    }

...
计算：{
currentProps（）{
返回此[this.currentTab.toLowerCase（）]；
}
}

很抱歉迟了回复，您的回答与我预期的一样，我忘了提到在我的子组件中使用props:dataso的每个子组件都是这样的：

props:['data']

    <component
        :is="currentTab"
        v-bind="currentProps"
    />

    ...

    computed: {
        currentProps() {
            return this[this.currentTab.toLowerCase()];
        }
    }