当前位置：首页 > ai >正文

作用域插槽父子组件插槽传值

ai 2025/7/13 14:59:10

在这里插入图片描述
父组件插槽里写的样式

在这里插入图片描述
不使用插槽，公共组件轮播图的样式

父组件

<swiperView :isslot="true" :swiperList="swiperList"><!-- 使用插槽在父组件自定义显示的内容 --><template v-slot:default="{ swiperData }">  <!-- 接收子组件传递的swiperData --><view class=""  style="background-color: pink;height: 100%;">{{swiperData.name}}</view></template>
</swiperView>
<script>export default {data() {return {swiperList:[{name: 'xiangmuList.png', //图片地址link: '', //点击图片连接的地址 先留出该字段,方便后续在图片上加点击事件}, {name: 'homeSwiper1.png', //图片地址link: '', //点击图片连接的地址 先留出该字段,方便后续在图片上加点击事件}],//给子组件传递的数据}}}
</script>

子组件

<template><view class="swiperFather"><!-- 轮播图 --><swiper @change="swiperChange" class="swiper" :style="{height:swiperHeight}" circular :indicator-dots="indicatorDots&&!indicatorDotsDiy" :autoplay="autoplay" :interval="interval":duration="duration" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor"><swiper-item v-for="(item,index) in swiperList" :key="index"><view class="swiperBox" v-if="isslot"><!-- 使用插槽,引用页面自定义内容 swiperData向父组件传值 --><slot :swiperData="item"></slot></view><view class="swiperBox" v-else><!-- 不使用插槽,显示正常轮播图 --><image v-if="joint" :src="imageBaseUrl+item.name" mode=""></image><image v-else :src="item.name" mode=""></image></view></swiper-item></swiper><view v-if="indicatorDots&&indicatorDotsDiy" class="indicatebox"><!-- 自定义指示点 --><span class="indicateCont" :class="{indicateActive:current==accindex}" :style="{backgroundColor:current==accindex?indicatorActiveColor:indicatorColor}" v-for="(acc,accindex) in swiperList" :key="index"></span></view></view>
</template><script>import serveObj from '@/config.js'export default {props: {isslot: {type: Boolean,default: false,// 是否使用插槽},joint: {type: Boolean,default: true,// 是否需要拼接 图片域名},swiperHeight: {// 轮播图所占的高度  rpx px单位均可以type: String,default: '360rpx'},swiperList: {type: Array,default: [{name: 'homeSwiper1.png', //图片后缀名称link: '', //点击图片连接的地址 先留出该字段,方便后续在图片上加点击事件}]},indicatorDots: {// 是否显示指示点type: Boolean,default: true},indicatorDotsDiy: {// 是否自定义指示点type: Boolean,default: true},autoplay: {// 是否自动播放type: Boolean,default: true},interval: {// 自动切换时间间隔type: Number,default: 2000},duration: {// 滑动动画时长type: Number,default: 500},indicatorColor: {// 指示点颜色type: String,default: '#fff'},indicatorActiveColor: {// 当前选中的指示点颜色	type: String,default: '#efba0e'}},components: {},data() {return {imageBaseUrl: serveObj.imageBaseUrl,current: 0, //当前所在滑块的 index}},onLoad() {},onShow() {},methods: {swiperChange(event) {// console.log("变化的值",event.detail.current)this.current = event.detail.current}}}
</script><style>.swiperFather .swiper {background-color: #fff;position: relative;}.swiperFather .swiper .swiperBox {height: 100%;}.swiperFather .swiper .swiperBox image {width: 100%;height: 100%;}/* 自定在指示点样式 */.swiperFather {position: relative;}.swiperFather .indicatebox {position: absolute;bottom: 20rpx;display: flex;justify-content: center;width: 100%;}.swiperFather .indicateCont {display: inline-block;width: 10rpx;height: 10rpx;border-radius: 50%;background-color: #fff;margin: 0px 8rpx;}.swiperFather .indicateActive {background-color: #efba0e;width: 20rpx;border-radius: 40rpx;}
</style>