使用 Vuejs 实现可重用的选项卡式组件答案

【问题标题】：Implementing a reusable tabbed component using Vuejs使用 Vuejs 实现可重用的选项卡式组件
【发布时间】：2020-01-03 15:44:56
【问题描述】：

我正在尝试在vueJs 中实现选项卡式可重用component，但我收到一个错误，即未定义特定组件。下面是两个组件

//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>

我已将其导入此组件，目前它显示错误 Uncaught ReferenceError: selectedComponent is not defined

//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>

【问题讨论】：

删除'List'的引号？
同样的错误@depperm
添加.vue到导入行
同样的错误...错误来自TabComponent
查看关于设置selectedComponent的默认值doc

标签： vue.js vue-component

【解决方案1】：

HTML 属性名称不区分大小写，因此浏览器会解释任何大写字符为小写。这意味着当您使用在 DOM 模板中，camelCased 的道具名称需要使用他们的 kebab-cases （连字符分隔的）等效项 (source)

尝试：

<tab-component :tabs="tabs" :selected-component="selectedComponent" />

编辑：

如果您将 props 定义为数组，请使用字符串更改列表（请参阅“Prop 类型”here）：

props: [ 'selectedComponent', 'tabs' ]

【讨论】：