一、默认插槽
<template><div class='father'><h3>父组件</h3><div class="content"><Category title='热门游戏列表'><ul><li v-for='item in games' :key='item.id'>{{item.name}}</li></ul></Category><Category title='今日美食城市'><img :src="imgUrl" alt=""></Category><Category title='今日影视推荐'><video :src="videoUrl" controls></video></Category></div></div>
</template>
<script setup>
import Category from './Category.vue'
import {ref,reactive} from 'vue'
let games=reactive([{id:'afdddwet1',name:'4399小游戏'},{id:'afdddwet2',name:'网页小游戏'},{id:'afdddwet3',name:'手机小游戏'},{id:'afdddwet4',name:'小游戏'}
])
let imgUrl=ref('https://p0.ssl.qhimgs1.com/sdr/400__/t0473991f73e7e7f1be.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped lang='scss'>
.father{width: 100%;height: 100%;padding:20px;.content{display: flex;justify-content: space-evenly;}img,video{width: 100%;}
}
</style><template><div class="category"><h4>{{title}}</h4><slot></slot></div>
</template>
<script setup>
defineProps(['title'])
</script>
<style scoped lang='scss'>
.category{background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height: 300px;h4{background-color: orange;text-align: center;font-size: 20px;}
}
</style>二、具名插槽
<template><div class='father'><h3>父组件</h3><div class="content"><Category><template v-slot:s1><h4>热门游戏列表</h4></template><template v-slot:s2><ul><li v-for='item in games' :key='item.id'>{{item.name}}</li></ul></template></Category><Category><template v-slot:s1><h4>今日美食城市</h4></template><template v-slot:s2><img :src="imgUrl" alt=""></template></Category><Category><template #s1><h4>今日影视推荐</h4></template><template #s2><video :src="videoUrl" controls></video></template></Category></div></div>
</template>
<script setup>
import Category from './Category.vue'
import {ref,reactive} from 'vue'
let games=reactive([{id:'afdddwet1',name:'4399小游戏'},{id:'afdddwet2',name:'网页小游戏'},{id:'afdddwet3',name:'手机小游戏'},{id:'afdddwet4',name:'小游戏'}
])
let imgUrl=ref('https://p0.ssl.qhimgs1.com/sdr/400__/t0473991f73e7e7f1be.jpg')
let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')
</script>
<style scoped lang='scss'>
.father{width: 100%;height: 100%;padding:20px;.content{display: flex;justify-content: space-evenly;}img,video{width: 100%;}h4{background-color: orange;text-align: center;font-size: 20px;}
}
</style><template><div class="category"><slot name='s1'></slot><slot name='s2'></slot></div>
</template>
<script setup>
</script>
<style scoped lang='scss'>
.category{background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height: 300px;
}
</style>三、作用域插槽
数据由子组件维护，页面结构由父组件维护
<template><div class='father'><h3>父组件</h3><div class="content"><Games><template v-slot='params'><ul><li v-for='item in params.youxi' :key='item.id'>{{item.name}}</li></ul></template></Games><Games><template v-slot:default='params'><ol><li v-for='item in params.youxi' :key='item.id'>{{item.name}}</li></ol></template></Games><Games><template #default='{youxi}'><h3 v-for='item in youxi' :key='item.id'>{{item.name}}</h3></template></Games></div></div>
</template>
<script setup>
import Games from './Games.vue'
</script>
<style scoped lang='scss'>
.father{width: 100%;height: 100%;padding:20px;.content{display: flex;justify-content: space-evenly;}img,video{width: 100%;}ul,ol{padding:10px;}
}
</style><template><div class="games"><h4>热门游戏列表</h4><slot :youxi='games'></slot></div>
</template>
<script setup>
import {ref,reactive} from 'vue'
let games=reactive([{id:'afdddwet1',name:'4399小游戏'},{id:'afdddwet2',name:'网页小游戏'},{id:'afdddwet3',name:'手机小游戏'},{id:'afdddwet4',name:'小游戏'}
])
</script>
<style scoped lang='scss'>
.games{background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height: 300px;h4{background-color: orange;text-align: center;font-size: 20px;}
}
</style>