https://www.yuque.com/shenping-unepn/fgknir/md70zt
- 子组件 child
<template>
<div class="content">
<div class="images" v-for="(item,index) in list" :key="item.id">
<div class="img">
<div>我是一个插槽测试,作用域插槽</div>
<slot :card="item"></slot>
</div>
<div class="bottom">
<p>我是明泽</p>
<p>我是测试,具名插槽</p>
<slot name="testbox" :img="item"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'child',
data() {
return {
list: [{
id: 1,
name: '测试1'
},{
id: 2,
name: '测试2'
},{
id: 3,
name: '测试3'
}],
}
},
}
</script>
<style lang="scss" scoped>
.content {}
</style>
- 父组件 parent
<template>
<div class="content">
<child>
<div class="cardHandle" slot-scope="scope">
<div class="img-bottom" v-for="(f,i) in checkModel" :key="i">
<div class="radio-box-top" v-if="scope.card.id == f">{{i+1}}</div>
</div>
</div>
<template v-slot:testbox="listbox">
<div class="cardHandle cardHandle2">
<div class="img-bottom" v-for="(f,i) in checkModel" :key="i">
<div class="radio-box-top" v-if="listbox.img.id == f">{{i+1}}</div>
</div>
</div>
</template>
</child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'parent',
components: {
child
},
data() {
return {
checkModel: [{
id: 1,
name: '测试1'
},{
id: 2,
name: '测试2'
},{
id: 3,
name: '测试3'
}],
}
},
}
</script>
<style lang="scss" scoped>
.content {}
</style>