Как вставить компонент в props vue js?

Question

[Владимир]

Один компонент выглядит так

<template>
    <router-link :to="href" class="tabbar-item">
        <div class="icon"><component :is="icon"/></div>
        <div class="view-name">{{ viewName }}</div>
    </router-link>
</template>

Я хочу в props передать компонент, который должен отрендериться в первом

<TabBarItem href='Home' :icon="homeIcon" viewName="Дом"></TabBarItem>

Проблема в том, что vue выдает ошибку component has been registered but never used
Имопртирую так:

<script>
import TabBarItem from '@/components/TabBarItem'
import iconHome from '@/components/icons/iconHome'

export default {
    components: {
        TabBarItem,
        iconHome
    },
    data(){
        return {
            homeIcon: iconHome
        }
    }
}
</script>

Answer 1

[Alex]

Если не ошибаюсь, то компонент который не рендерится не нужно объявлять в секции components

UPD
Ну, а вообще, тут лучше было бы использовать именованый слот. Либо динамический импорт примерно так:

<template>
    <router-link :to="href" class="tabbar-item">
        <div class="icon"><component :is="iconComponent"/></div>
        <div class="view-name">{{ viewName }}</div>
    </router-link>
</template>


<script>
export default {
    props: ['iconName'],
    computed () {
        iconComponent() {
            return import('@/components/icons/' + this.iconName)
        }
    }
}
</script>

Answer 2

[Александр Аксентьев]

Проблема в том, что vue выдает ошибку component has been registered but never used

ну так не регистрируйте его тут, он не нужен

components: {
        TabBarItem,
        iconHome
},