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方法都会触发一遍。
