Vue.js 使用Vuejs实现可重用的选项卡式组件

我试图在

vueJs

中实现一个选项卡式可重用

组件

，但我遇到一个错误，即没有定义特定的组件。下面是两个组件

//TabComponent
<template>
    <div>
        <div class="row">
            <div class="col-lg-12 col-xl-12">
                <div class="card-box">
                    <ul class="nav nav-tabs nav-bordered">
                        <li v-for="tab in tabs" :key="tab" class="nav-item">
                            <a href="javascript:;"  @click="selectedComponent = tab" data-toggle="tab" aria-expanded="false"  :class="['nav-link', { active: selectedComponent === tab }]"> {{tab}} </a>
                        </li> 
                    </ul>
                    <div class="tab-content">
                        <component :is="selectedComponent"></component>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'TabComponent',
    props: [ selectedComponent, tabs ] //The error is coming from this line
}
</script>

HTML属性名称不区分大小写，因此浏览器将解释 任何大写字符均为小写。这意味着当你使用 在DOM模板中，camelCased道具名称需要使用其kebab-cased （以连字符分隔的）等效项（）

尝试：

---

编辑：

如果将道具定义为数组，请使用字符串更改列表（请参见“道具类型”）：

props:['selectedComponent'，'tabs']

从

'List'

中删除引号？相同错误@deppermadd

.vue

到导入行相同错误。。。错误来自

选项卡component

请参阅关于设置

selectedComponent的默认值
//Entitlements component
<template>
    <div>
        <tab-component :tabs="tabs" :selectedComponent="selectedComponent" />
    </div>
</template>

<script>
import TabComponent from "../../../components/TabComponent";
import List from "./Entitlements/List";
import MyEntitlements from "./Entitlements/MyEntitlements";
export default {
    name: 'Entitlements',

    components: {List, MyEntitlements, TabComponent},

    data(){
        return{
            tabs: ['List', 'MyEntitlements'],
            selectedComponent: 'List',
        }
    }
}
</script>