vue +偷窃者实现组件化开发的实例代码

　　

<强>偷窃者的组件

　　 　　 　　& lt; template> 　　& lt; div类=皊wiper-container”比; 　　& lt; div类=皊wiper-wrapper”比; 　　& lt; div类=v代表“swiper-slide”=巴登哉呦睢弊４? lt; img: src=" https://www.yisu.com/zixun/item.room_src " alt="祝辞& lt;/div> 　　& lt; !——& lt; div类=v代表“swiper-slide”=安馐韵钅俊弊４? lt; img: src=" https://www.yisu.com/zixun/item.room_src " alt="祝辞& lt;/div>——比; 　　& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　& lt; script> 　　从“偷窃者”进口偷窃者 　　出口默认{ 　　名称:“偷窃者”, 　　数据(){ 　　返回{ 　　mySwiper:空,//测试:(//癶ttps://rpic.douyucdn.cn/acrpic/171024/288016_0921.jpg”,//癶ttps://rpic.douyucdn.cn/acrpic/171024/748396_0924.jpg”,//癶ttps://rpic.douyucdn.cn/acrpic/171024/453751_0922.jpg”,//" https://rpic.douyucdn.cn/acrpic/171024/79663_0920.jpg "//) 　　} 　　}， 　　道具:“偷窃者,//偷窃者的就是测试这个数据传递来的 　　方法:{ 　　_initSwiper () { 　　这一点。mySwiper=new偷窃者(”。swiper-container’, { 　　播放:5000//可选选项,自动滑动 　　}） 　　}， 　　_updateSwiper () { 　　美元。nextTick(()=比;{ 　　this.mySwiper.update(真正的);//读卡器设备更新的方法 　　}） 　　}， 　　swiperUpdate () { 　　如果(this.mySwiper){//节点存在 　　this._updateSwiper ();//更新 　　其他}{ 　　this._initSwiper ();//创建 　　} 　　}， 　　}， 　　看:{//通过道具传来的数据和组件一加载节点就创建成功二者不是同步,实时监听的偷窃者(传递的值)的变化 　　偷窃者(){ 　　this.swiperUpdate (); 　　} 　　}， 　　安装(){ 　　this.swiperUpdate ();//页面一加载拉去数据创建节点 　　} 　　} 　　& lt;/script> 　　& lt;风格lang=皊css”scoped> 　　.swiper-container { 　　宽度:100%; 　　高度:4快速眼动; 　　margin-top: 0.9快速眼动; 　　.swiper-wrapper { 　　宽度:100%; 　　高度:100%; 　　.swiper-slide { 　　background-size:封面; 　　宽度:100%; 　　高度:4快速眼动; 　　img { 　　宽度:100%; 　　高度:100%; 　　} 　　} 　　} 　　} 　　& lt;/style> 　　 　　

<强>回家。vue调用的组件方法

　　 　　//html 　　& lt;偷窃者:偷窃者=" roomList.slice (6、10)”祝辞& lt;/swiper>//js 　　从组件/偷窃者/偷窃者的进口偷窃者 　　组件:{ 　　偷窃者 　　}, 　　 　　

问题:如果单纯的调用_initSwiper的方法,会发现页面是不能滚动的,但是页面随便修改东西,然后保存的偷窃者又可以滚动的,这个个原因是初始偷窃者的节点没有创建成功,值页面有穿进去的,一层一层的可以打印偷窃者的值为空的,当修改东西值就能传递进去的,所以的这里的我们需要通过判断节点是否成功来更新siwper的方法

　　

vue +偷窃者实现组件化开发的实例代码