<template><divclass="swiper-container"ref="cur"><divclass="swiper-wrapper"><divclass="swiper-slide"v-for="(carousel, index) in list":key="carousel.id"><img:src="carousel.imgUrl"/></div></div><!--如果需要分页器--><divclass="swiper-pagination"></div><!--如果需要导航按钮--><divclass="swiper-button-prev"></div><divclass="swiper-button-next"></div></div></template><script>//引入SwiperimportSwiperfrom"swiper";exportdefault{name:"Carsousel",props:["list"],watch:{list:{//立即监听:不管你数据有没有变化,我上来立即监听一次//为什么watch监听不大list:因为这个数据从来没有发生变化(数据是父亲给的,父亲给的时候就是一个对象,对象里面该有的数据都是有的)immediate:true,handler(){//只能监听到数据已经有了,但是v-for动态渲染结构我们还是没有办法确定的,因此还是需要用nextTickthis.$nextTick(()=>{varmySwiper=newSwiper(this.$refs.cur,{loop:true,//如果需要分页器pagination:{el:".swiper-pagination",//点击小球的时候也切换图片clickable:true,},//如果需要前进后退按钮navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev",},});});},},},};</script><stylescoped></style>