Vue项目中常见问题(24)封装共用组件Carousel

目录

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

1.Home/Floor中的轮播图是写在mounted里面的

 2.而我们的Home中大的轮播图ListContainer是写在watch中的

3.Floor中的代码如下

4.因为封装的后是全局组件,所以我们在components中新建一个文件夹Carousel,里面在建一个index.vue

5.把Home/Floor中轮播图的结构带走,放到我们新建的Carousel/index.vue中

6.在main.js中引入注册为全局组件 

 7.在Home/Floor/index.vue中使用轮播图

8.然后我们在Home/ListContainer/index.vue中把轮播图的数据换成下面的

---

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

由于首页Home中的轮播图有三个,结构和样式基本一样的,所以我们稍微修改一下代码,然后对轮播图进行封装

1.Home/Floor中的轮播图是写在mounted里面的

 2.而我们的Home中大的轮播图ListContainer是写在watch中的

 所以为了能够封装代码,我们把Home/Floor中轮播图的写法改为ListContainer中的写法

3.Floor中的代码如下

     watch: {
    list:{
      //立即监听,不管你数据有没有变化,上来立即监听一次
      immediate:true,
      handler(){
        //监听不到数据的变化,因为数据是从父组件传过来的一个对象,该有的数据都有,重来没有变化过
        // console.log('我在监听Floor组件中的list数据') 
        //只能监听到数据已经有了,但是v-for动态渲染结构我们还是没有办法确定的,因此还是需要用nextTick
        this.$nextTick(()=>{
          var mySwiper = new Swiper(
            this.$refs.cur, //用refs来获取DOM
            {
              //第一个参数：设置轮播图方向【属性这有两个：水平、垂直】
              // direction: 'vertical