vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】

23.把首页当中的轮播图拆分为一个共用的全局组件

切记：以后在开发项目的时候，如果看到某个组件在很多地方使用，你把它变成全局组件，注册一次，可以再任何地方使用，共用的组件|非路由组件放在components文件夹中。

注意点1：

问题：已经注册全局组件了，为啥还报错不认识？

src/main.js

//全局注册轮播图组件
import Carousel from "@/components/Carousel"
Vue.component(Carousel.name, Carousel)

src/components/Carousel/index.vue

<template>
  <div class="swiper-container" ref="mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="carousel in list" :key="carousel.id">
        <img :src="carousel.imgUrl"/>
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper"

export default {
  name: "carousel",
  props: ["list"],
  watch: {
    //方watch + nextTick
    list: {
      immediate: true,
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable: true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
        });
      }
    }
  }
}
</script>

<style scoped>

</style>

答案：注册那里没问题， 问题出在自定义组件Carousel的name属性是小写，name: “carousel”,所以只能把carousel变成首字母大写的name: "Carousel"即可。

注意点2：

问题：原来ListContainer组件的监视属性watch没有配置immediate: true,，为啥汇总后要多配置这个？

答案：因为原来ListContainer组件和Floor组件内的轮播图方法不一样，原来ListContainer组件不用动没问题，但是Floor组件内将mounted()改为watch方法时发现监听不到floorItem，为什么监听不到floorItem值改变呢？因为floorItem是在父组件Home中传递进来的，压根不是异步调用赋值的，所以floorItem值压根就没改变过所以不会触发原Floor组件内的swiper实例化操作，而加上immediate: true的属性就代表无论floorItem值改变不改变，watch方法都会触发一遍。