vue中引用捣蛋鬼轮播插件的教程详解

有时候我们需要在某视频剪辑软件中使用轮播组件，如果是在某视频剪辑软件组件中引入第三方组件的话，最好通过新公共管理安装，从而进行统一安装包管理。

申明：本文所使用的是vue.2x版本。

通过新公共管理安装插件：

新公共管理安装swiper -保存-开发

在需要使用捣蛋鬼的组件里引入嗖嗖，嗖嗖的初始化放在安装好的里

Slider.vue源码：

模板div class=' swiper-container ' div class=' swiper-wrapper ' div class=' swiper-slide ' img src=' http :/夹具/滑块/t1。SVG//div class=' swiper-slide ' img src=' http :/夹具/滑块/T2。SVG '/div div class=' swiper-slide '幻灯片3/div/div！-如果需要分页器-div class=' swiper-pagination '/div！-如果需要导航按钮- !-div class=' swiper-button-prev '/div-！-div class=' swiper-button-next '/div-！-如果需要滚动条- !-div class=' Swiper-滚动条'/div-/div/模板脚本导入' Swiper/dist/CSS/Swiper。' CSS '从斯威珀导入Swiper导出默认{名称： '滑块'，挂载(){新Swiper(' .swiper-container '，{ loop: true，//如果需要分页器分页： ' .swiper-pagination '，//如果需要前进后退按钮下一步按钮：'。swiper-button-next '，prevButton: ' .swiper-button-prev '，//如果需要滚动条scrollbar: ' .swiper-scrollbar '，}) } }/scriptstyle作用域swiper-集装箱{宽度： 100%；保证金： 0；padd : 0；} .swiper-wrapper { height : 200 px；} .swiper-slide img {最大宽度： 100%；} .swiper-slide { text-align : center；背景# fff/*垂直居中幻灯片文本*/display :-web套件-盒子；显示器：-ms-flex盒；display :-web套件-flex；display: flex-web套件-包装盒-包装3360中心；-ms-flex-pack 3360中心；-网络套件-狡辩-content:中心；正义-内容：中心；-webkit-box-align:中心；-ms-flex-align:中心；-web套件-align-items :中心；align-items:居中；}/样式运行效果：

接下来，我们对上面的代码进行重构，因为如果我们用钢性铸铁选择器作为捣蛋鬼定位页面上元素依据的话，假如在一个页面上同时有两个。滑动容器，那么这个组件就会乱套！我们要秉承着低耦合的开发方式来重构我们的代码。

我们可以使用某视频剪辑软件提供的更精确的指明方式在元素中添加裁判员熟悉，然后在代码内通过这个。参考文献。引用名来引用。

这是Vue.js2.0后的编号，参考标记是标准的超文本标记语言属性，它取代了Vue.js 1.x中v-ref的写法

需要注意的是，如果改为动态绑定图片，请参考：vue-cil和工具中本地静态图片的路径问题解决方案

我这里将静态资源文件转移到了静电目录下面。

重构后的代码如下：

模板div class=' Swiper-container ' ref=' Slider ' div class=' Swiper-wrapper ' div class=' Swiper-slide ' v-for=' slide in slide ' router-link 3360 to=' { name : ' BookDetail '，params : { id : slide。id } } ' img 3360 src=' http 3360幻灯片。img _ URL '/router-link/div/div/div/模板脚本导入' Swiper/dist/CSS/static/sliders/t1 . SVG ' }，{id:2，img_url: ' ./static/sliders/t2.svg'}] } }，mounted(){ new Swiper (this .$refs.slider，{ loop: true，//如果需要分页器分页： ' .swiper-pagination '，//如果需要前进后退按钮下一步按钮：'。swiper-button-next '，prevButton: ' .swiper-button-prev '，//如果需要滚动条scrollbar: ' .swiper-滚动条'，})} }/脚本这里还没有把组件完全独立，里面有数据定义，其实可以把这个数据作为一个参数传递进来，也就是组件之间数据传递。

某视频剪辑软件页面跳转传参

通过路由传参，在路由器/索引。射流研究…中定义路由

要传输的路由参数已在导出默认新路由器前面的转盘组件中定义({ route :[{ name 3360 ' book detail '，path3360'/books/: id '，component: bookdetail}])

router-link : to=' { name : ' bookdetail '，params 3360 { id 3360 slide . id } } ' img 3360 src=' http 3360 slide . img _ URL '/router-link参数接收接口BookDetail.vue

Templatediv单击span v-text=' id '/span/div/template脚本导出默认值{name :' book detail '，data () {return {id : this。$ route.params.id}}。prop s :[]}/script style scoped/style如果传递的参数太多，肯定不方便，那么可以采用vuex或者组件数据传输。

关于组件价值转移，请参考：Vue组件之间的价值转移

摘要

以上是边肖介绍的vue中引用swiper carousel插件教程的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！