昨天在用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的官方文档中早有相应的解答,只不过当初看文档时没理解,当被坑过后才记住······