qq_53512708的博客

效果图：需求：老师布置作业让大伙跟着b站的一个up做一个网易云音乐首页，up用的vue-awesome-swiper做轮播图，我用的vant，在做到“发现好歌单”模块的时候发现vant没有一屏显示多图的效果，于是自己魔改了一些样式凑合一下思路：改轮播组件overflow: hiddle为visible，设置轮播组件的宽为三分之一屏宽，轮播组件外包裹一个大盒子overflow: hiddle代码：<template> <div class="musicLis

今天在看coderwhy老师后台管理系统项目实战视频的时候发现组件封装的思路与动态插槽传递非常有意思，写个博客记录一下！需求及基本信息说明组件Goods调用组件page-content，组件page-content调用组件hy-table。为了方便使用，组件page-content封装公共插槽（如果将所有页面的私有的插槽都一股脑放到组件page-content中封装性会变差)，需要在Goods中传递私有插槽内容在hy-table中显示。这时候就产生了跨组件插槽传递的需求，而由于编译作用域

需求实现产品列表筛选条件排序，记得element-plus中的el-table-column实现了对表格数据排序的效果，不过俺现在做的是移动端页面，用的vant，vant没有类似的组件，于是打算手写一个。思路v-for遍历显示从父组件传来配置数据信息，flex一行进行显示，当点击上三角按钮时为升序，下三角为降序，再次点击时取消排序，当三角按钮被点击时，触发自定义事件sortOptionsChange，传递给父组件对应的prop（哪一栏）和state（升序、降序、不排序）信息，父组件接收到子组件传

问题1：vue-awesome-swiper初始化swiperOption后，如何修改options中的配置，例如slidesPerView、autoplay等信息？解决方案：修改轮播图的params属性问题2：父组件向子组件传递多次参数，子组件只显示第一次传递的结果，子组件只接收第一次？结论：子组件其实都接收到了，可以监听props的值来更新组件的值。我想要实现轮播图动态更新slidesPerView，我最终的解决方案：监听子组件接受到的参数，当监听到参数发生改变，就更新slidesPerView

本人用的vue-awesome-swiper组件，组件默认的按钮是在里边的，如果改变left或right的值移到外侧会因为overflow:hidden;样式的影响而消失，我的做法是写一个假的按钮在外面，当点击假的按钮时获取轮播图按钮的dom结点进行“click” <div class="preview-product"> <my-swiper class="preview-product-swiper"