Vue.js 组件未知的自定义元素

Posted 2023-02-22

【中文标题】Vue.js 组件未知的自定义元素

【英文标题】：Vue.js component Unknown custom element

【发布时间】：2018-12-23 05:59:37

【问题描述】：

我在 Laravel 中使用 Vuejs，我的组件正在渲染，但 vuejs 不断给我警告未知的自定义元素。您是否正确注册了组件？

我不知道我在这里缺少什么。有时某些组件不起作用。 这是isotimes.js。

App.js

require('./bootstrap');
// require('./manage');

window.Vue = require('vue');


// import 'swiper/dist/css/swiper.css'


import Buefy from 'buefy'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueMatchHeights from 'vue-match-heights'
import  swiper, swiperSlide  from 'vue-awesome-swiper'


Vue.component('FeaturedSlider', require('./components/frontend/FeaturedSlider.vue'));
Vue.component('VehicleOffersBlock', require('./components/frontend/vehicles/VehicleOffersBlock.vue'));
Vue.component('LatestNewsBlock', require('./components/frontend/news/LatestNewsBlock.vue'));
Vue.component('FinanceCalculator', require('./components/frontend/FinanceCalculator.vue'));
Vue.component('LatestOffersBlock', require('./components/frontend/offers/LatestOffersBlock.vue'));
Vue.component('AllCompaniesBlock', require('./components/frontend/companies/AllCompaniesBlock.vue'));
Vue.component('SearchVehiclesBlock', require('./components/frontend/SearchVehiclesBlock.vue'));
Vue.component('BrandVehicles', require('./components/frontend/offers/BrandVehicles.vue'));
Vue.component('ModelTopCarusel', require('./components/frontend/vehicles/ModelTopCarusel.vue'));
Vue.component('ModelInsideImages', require('./components/frontend/vehicles/ModelInsideImages.vue'));
Vue.component('TrimSpecifications', require('./components/frontend/vehicles/TrimSpecifications.vue'));
Vue.component('AllOffers', require('./components/frontend/offers/AllOffers.vue'));
Vue.component('MainFooter', require('./components/frontend/MainFooter.vue'));



Vue.use(VueAwesomeSwiper)
Vue.use(Buefy)
Vue.use(VueMatchHeights);



export default 
    components: 
      swiper,
      swiperSlide
    
  

主页

<div class="container">
    <search-vehicles-block></search-vehicles-block>
</div>

<featured-slider></featured-slider>

<script>



    var app = new Vue(


      el: '#app',
        data() 
            return 
                frontCoverSwiperOptions: 
                spaceBetween: 30,
                centeredSlides: true,
                        autoplay: 
                            delay: 6000,
                            disableOnInteraction: false
                        ,
                        pagination: 
                            el: '.swiper-pagination',
                            clickable: true,
                            dynamicBullets: true
                        ,
                        navigation: 
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev'
                        
                    
                
            
    );
</script>

请帮帮我。

谢谢

【问题讨论】：

能否将您的代码包含在文本中？还请包括 Root.vue

你好，@Sumurai8 我用代码更新了我的问题。我不明白 Root.vue

github.com/amirehman/autozmart你可以查看repo

我猜App.js 只是从未为该页面加载，而是您正在现场将页面转换为（无名）根组件。

确保您在首页script之前加载app.js

【参考方案1】：

有时即使我遇到这个问题，我也会用- 添加组件名称。 尝试这个： Vue.component('search-vehicles-block', require('./components/frontend/SearchVehiclesBlock.vue'));

请清除缓存。