vue组件模板加载出现同名的情况如何处理 For recursive components, make sure to provide the "name" option

昨天在用uni-app写h5项目时出现了一个问题：

报错：

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

本身uni-app中自带了名字为swiper的轮播组件，而我又在项目中用npm下载了vue-awesome-swiper包。

这两个组件的组件名都是swiper。这时在html中使用swiper名字加载组件时，用到的会是uni-app的swiper组件，vue-awesome-swiper组件无法使用，因为它们俩重名了。

html：

            
                
                    
                    
                        {{e.name}}
                         > 
                    
                
            

        

 

所以需要给vue-awesome-swiper组件重新取一个名字。

我这里使用的是局部组件，在局部注册组件时用键值对方法改名即可。

js：

 // require styles
    import 'swiper/dist/css/swiper.css'
    import { swiper, swiperSlide } from 'vue-awesome-swiper'

components:{
            //同名组件键值对重新取名
            swiperImg:swiper,
            swiperSlide,
        }
    }

html：

            
                
                    
                    
                        {{e.name}}
                         > 
                    
                
            
        

 

其实在vue的官方文档中早有相应的解答，只不过当初看文档时没理解，当被坑过后才记住······