VueJs с использованием вложенного компонента и получением неизвестной ошибки пользовательского элемента

После определения некоторых компонентов и использования внутри страницы, например:

<html>
...
<body>
...
<div class = "card border-left-3 border-left-grey-400 rounded-left-0">
    <ul id = "tab-list" class = "nav nav-tabs nav-tabs-bottom mb-0">
        <li class = "nav-item">
            <a href = "#card-toolbar-tab1" class = "nav-link active legitRipple" data-toggle = "tab">
                tree list view
            </a>
        </li>
        <li class = "nav-item">
            <a href = "#card-toolbar-tab2" class = "nav-link legitRipple" data-toggle = "tab">
                list view
            </a>
        </li>
    </ul>
    <div id = "tab-content" class = "card-body tab-content pr-0 pl-0">
        <div id = "card-toolbar-tab1" class = "tab-pane fade active show">
            <categories-tree-view inline-template>
                <div></div>
            </categories-tree-view>
        </div>
        <div id = "card-toolbar-tab2" class = "tab-pane fade pl-3 pr-3">
            <categories-list-view inline-template>
                <div></div>
            </categories-list-view>
        </div>
    </div>
</div>
...
</body>
...
</html>

оба определенных компонента, такие как categories-tree-view и categories-list-view, работают без каких-либо проблем, теперь я хочу обернуть их другим компонентом, таким как categories, например:

...
<categories inline-template>
<div class = "card border-left-3 border-left-grey-400 rounded-left-0">
    <ul id = "tab-list" class = "nav nav-tabs nav-tabs-bottom mb-0">
        <li class = "nav-item">
            <a href = "#card-toolbar-tab1" class = "nav-link active legitRipple" data-toggle = "tab">
                tree list view
            </a>
        </li>
        <li class = "nav-item">
            <a href = "#card-toolbar-tab2" class = "nav-link legitRipple" data-toggle = "tab">
                list view
            </a>
        </li>
    </ul>
    <div id = "tab-content" class = "card-body tab-content pr-0 pl-0">
        <div id = "card-toolbar-tab1" class = "tab-pane fade active show">
            <categories-tree-view inline-template>
                <div></div>
            </categories-tree-view>
        </div>
        <div id = "card-toolbar-tab2" class = "tab-pane fade pl-3 pr-3">
            <categories-list-view inline-template>
                <div></div>
            </categories-list-view>
        </div>
    </div>
</div>
</categories>

вот я получаю эту ошибку:

[Vue warn]: Unknown custom element: <categories-tree-view> 
- did you register the component correctly? For recursive components, 
make sure to provide the "name" option.

found in

---> <Categories>
       <Root> app.js:833:15
[Vue warn]: Unknown custom element: <categories-list-view> 
- did you register the component correctly? For recursive components, 
make sure to provide the "name" option.

Реализация vuejs для определения этих компонентов:

new Vue({
    store,
    components:
        {
            //category
            'categories':()=>import('@Component/pages/category/categories.js'),
            'categories-tree-view':()=>import('@Component/pages/category/categories-list-view.js'),
            'categories-list-view':()=>import('@Component/pages/category/categories-tree-view.js'),
            'category_item':()=>import('@Component/pages/category/category-item.js'),
        }
    }
}).$mount('#app');

вам нужно импортировать их в компонент категорий или использовать слот

Lawrence Cherone 04.04.2021 13:35
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
23
0

Другие вопросы по теме