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

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

这两个组件的组件名都是swiper。这时在html中使用swiper名字加载组件则会出现只能用uni-app的swiper组件，vue-awesome-swiper的组件无法使用。因为重名了。

html：

<swiper :options="swiperOption" @someSwiperEvent="callback">
            <swiper-slide v-for="(e,index) in recommendList" :key="index" class="swiper-wrapper">
                <view @click="toDetails(e)" class="swiperBox">
                    <img class="swiperImg" src="../../assets/images/0.png" alt="">
                    <view class="swiperText">
                        <span>{{e.name}}</span>
                        <view class="swiperR"> > </view>
                    </view>
                </view>
            </swiper-slide>

        </swiper>

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

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

js：

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

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

html：

<swiper-img :options="swiperOption" @someSwiperEvent="callback">
            <swiper-slide v-for="(e,index) in recommendList" :key="index" class="swiper-wrapper">
                <view @click="toDetails(e)" class="swiperBox">
                    <img class="swiperImg" src="../../assets/images/0.png" alt="">
                    <view class="swiperText">
                        <span>{{e.name}}</span>
                        <view class="swiperR"> > </view>
                    </view>
                </view>
            </swiper-slide>
        </swiper-img>

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