javascript - 未知的自定义元素

Question

我想在 vuejs 中创建一个选项卡，但我得到的只是一个错误，未知的自定义元素: - 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我已经导入了所有需要的组件，包括选项卡组件，但仍然收到错误。

任何帮助将不胜感激

配置文件组件

<template>
  <layout>
    <div class="mt-4 md:mt-10">
        <div class="mx-auto px-3 sm:px-6 xl:px-16">    
            <div class="flex flex-wrap justify-between">
                <div class="md:w-2/6 lg:w-1/5 w-full mb-6 lg:mb-0 lg:block md:order-last lg:order-none">
                    <div class="bg-white rounded shadow">   
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="text-center justify-center flex-col">
                                <div class="border-t border-b flex justify-center items-center">
                                    <p class="px-3 py-1 flex-col">
                                        <span class="font-bold text-sm">543</span> 
                                        <span class="text-gray-500 text-xs">Posts</span>
                                    </p>
                                    <p class="px-3 border-l py-1 flex-col">
                                        <span class="font-bold text-sm">436</span> 
                                        <span class="text-gray-500 text-xs">Following</span>
                                    </p>
                                </div>
                            </div>
                        </div>   
                    </div>
                    <div class="p-4 bg-white shadow mt-4">
                        <div class="flex items-center">
                          <i data-feather="map-pin" class="text-gray-600 w-4 h-4"></i>
                          <span class="text-sm ml-3 font-semibold text-gray-800">Lagos, Nigeria</span>
                        </div>
                                                <div class="flex items-center mt-2">
                                                    <i data-feather="calendar" class="text-gray-600 w-4 h-4"></i>   
                                                    <span class="text-sm ml-3 font-semibold text-gray-800">Joined, January 2018</span>
                        </div>
                        <div class="flex items-center mt-2">
                                                    <i data-feather="link" class="text-gray-600 w-4 h-4"></i>   
                                                    <span class="text-sm ml-3 font-semibold text-gray-800 hover:underline"><a href="#">https://twingle.io</a></span>
                        </div>
                       <div class="flex items-center mt-2">
                                                    <i data-feather="globe" class="text-gray-600 w-4 h-4"></i>  
                                                    <span class="text-sm ml-3 font-semibold text-gray-800 hover:underline"><a href="#">https://omike.me</a></span>
                        </div>
                    </div>
                    <div class="p-4 bg-white shadow mt-4">
                        <div>
                            <p class="font-bold">My Skills</p>
                        </div>
                        <div class="mt-3">
                            <ul class="inline">
                                <li class="inline mr-2">Javascript</li>&middot;
                                <li class="inline mr-2">PHP</li>&middot;
                                <li class="inline mr-2">Laravel</li>&middot;
                                <li class="inline mr-2">NodeJS</li>&middot;
                                <li class="inline">VueJS</li>
                            </ul>
                        </div>
                    </div> 
                </div>
                <div class="w-full md:w-3/7 lg:w-1/2">
                    <tabs>
                                            <tab name="Services" :selected="true">
                                                <h1>What we do</h1>
                                            </tab>
                                            <tab name="Pricing">
                                                <h1>How much we do it for</h1>
                                            </tab>
                                            <tab name="About Us">
                                                <h1>Why we do it</h1>
                                            </tab>
                                        </tabs>
                </div>
                <div class="hidden lg:block md:w-2/6 lg:w-1/4">
                    <Info/>
                </div>
            </div>  
        </div>
    </div>        
    </layout>  
</template>
<script>

import Info from '@/Shared/Info'
import Layout from '@/Shared/Layout'
import UserFeed from '@/Components/User/UserFeed'
import Tabs from '@/Components/Tabs'

export default {
    components:{
        Info,
            UserFeed,
        Layout,
        Tabs,
    },
}
</script>

选项卡组件

<template>
    <div>
        <div class="bg-white shadow rounded px-4 mb-6">
           <ul class="list-reset flex pro-tab">
               <li class="pro-tab-active py-2">Posts</li>
               <li class="ml-6 py-2">Achievements</li>
               <li class="ml-6 py-2 hidden sm:block">Activities</li>
           </ul>
        </div>
        <div class="tab-details">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import Tab from '@/components/Tab'

export default {

    component:{Tab},

    mounted(){
        console.log(this.$children);
    }


}
</script>

<style>

</style>

选项卡组件

    <template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

Answer 1

尝试添加Tab组件到ProfileComponent :

 components:{
        Info,
        UserFeed,
        Layout,
        Tabs,
        Tab
    },

即使您已经将其添加到 Tabs组件对象，在解析 ProfileComponent 时模板处理器无法访问该对象，即Tab出现。您还应该能够从 Tabs 中删除导入。组件。