Блог

Главная - Вопросы по программированию - Vue не обнаруживает компонент

Vue не обнаруживает компонент

#vue.js

#vue.js

Вопрос:

В моем Vue есть два компонента: «панель навигации» и «статьи». ‘articles’ работает нормально, ‘navbar’ — нет. Я получаю сообщение об ошибке «неизвестный пользовательский элемент: вы правильно зарегистрировали компонент?» Вот мой код.

Панель навигации.vue

 <template>
    <nav class="navbar navbar-expand-sm navbar-dark bg-info mb-2">
        <div class="container">
            <a href="#" class="navbar-brand">Testing Vue</a>
        </div>
    </nav>
</template>

app.js

 Vue.component('navbar', require('./components/Navbar.vue'));
Vue.component('articles', require('./components/Articles.vue'));


const app = new Vue({
    el: '#app'
});

blade.php

 <body>
    <div id="app">
        <navbar></navbar>
        <div class="container">
            <articles></articles>
        </div>
    </div>


    <script src="{{asset('js/app.js')}}"></script>    
 </body>

Комментарии:

1. У вашего Navbar.vue нет модели. Вы не можете использовать только шаблон. Вам нужен экспорт по умолчанию (или, как вы используете require , module.exports = vm .

2. Каковы настройки сборки вашего интерфейса? Webpack? Возможно, вам нужно импортировать компоненты вместо того, чтобы требовать их. Также есть вероятность, что имя не должно быть navbar, поскольку оно может конфликтовать с html-тегами. Вот почему вы обычно должны добавлять префиксы к своим пользовательским компонентам. Например. Vue.component('vue-navbar' ...)

Ответ №1:

У вашего устройства Navbar.vue нет модели. Вы не можете использовать только шаблон. Вам нужен экспорт по умолчанию (или, как вы используете require , module.exports ):

 <template>
    <nav class="navbar navbar-expand-sm navbar-dark bg-info mb-2">
        <div class="container">
            <a href="#" class="navbar-brand">Testing Vue</a>
        </div>
    </nav>
</template>
<script>
  module.exports = {
    name: 'navbar',
    data: function() {
      return {}
    }
  }
</script>