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

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

1.jpeg

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>

image.png

答案:注册那里没问题, 问题出在自定义组件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方法都会触发一遍。

目录
相关文章
|
20小时前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
8 2
|
20小时前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
6 1
|
20小时前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
5 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
126 0
重读vue电商网站45之项目优化上线
|
2天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
11 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
2天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
1天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
9 1
|
1天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
9 1
|
2天前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
8 1