本文主要是介绍Vue10 组件通信-插槽，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
插槽
分成三种：默认插槽、具名插槽、作用域插槽
默认插槽
父组件father.vue
<template><div class="father"><h3>父组件</h3><div class="content"><Category title="热门游戏列表"><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></Category><Category title="今日美食城市"><img :src="imgUrl" alt=""></Category><Category title="今日影视推荐"><video :src="videoUrl" controls></video></Category></div></div>
</template><script setup lang="ts" name="Father">import Category from './Category.vue'import { ref,reactive } from "vue";let games = reactive([{id:'asgytdfats01',name:'英雄联盟'},{id:'asgytdfats02',name:'王者农药'},{id:'asgytdfats03',name:'红色警戒'},{id:'asgytdfats04',name:'斗罗大陆'}])let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.content {display: flex;/* flex将所有竖向变成横向 均分开 */justify-content: space-evenly;}img,video {width: 100%;}
</style>
Categroy.vue
<template><div class="category"><h2>{{title}}</h2><slot>默认内容</slot></div>
</template><script setup lang="ts" name="Category">defineProps(['title'])
</script><style scoped>.category {background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height: 300px;}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;}
</style>
具名插槽
每一个坑内容 必须放在对应的里面 v-slot:name
父组件father.vue
<template><div class="father"><h3>父组件</h3><div class="content"><Category><template v-slot:s2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul></template><template v-slot:s1><h2>热门游戏列表</h2></template></Category><Category><template v-slot:s2><img :src="imgUrl" alt=""></template><template v-slot:s1><h2>今日美食城市</h2></template></Category><Category><template #s2><video :src="videoUrl" controls></video></template><template #s1><h2>今日影视推荐</h2></template></Category></div></div>
</template><script setup lang="ts" name="Father">import Category from './Category.vue'import { ref,reactive } from "vue";let games = reactive([{id:'asgytdfats01',name:'英雄联盟'},{id:'asgytdfats02',name:'王者农药'},{id:'asgytdfats03',name:'红色警戒'},{id:'asgytdfats04',name:'斗罗大陆'}])let imgUrl = ref('https://z1.ax1x.com/2023/11/19/piNxLo4.jpg')let videoUrl = ref('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.content {display: flex;/* flex将所有竖向变成横向 均分开 */justify-content: space-evenly;}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;}img,video {width: 100%;}
</style>
子组件 Category.vue
<template><div class="category"><slot name="s1">默认内容1</slot><slot name="s2">默认内容2</slot></div>
</template><script setup lang="ts" name="Category">defineProps(['title'])
</script><style scoped>.category {background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;padding: 10px;width: 200px;height: 300px;}
</style>
作用域插槽
- 数据在子那边，但根据数据生成的结构，由父亲决定
案例
父组件 father.vue
根据需要调整传递的games格式
v-slot 可以直接结构数据 下面可以直接写 g in games
<template><div class="father"><h3>父组件</h3><div class="content"><Game><template v-slot="params"><ul><li v-for="g in params.games" :key="g.id">{{ g.name }}</li></ul></template></Game><Game><template v-slot="{games}"><ol><li v-for="g in games" :key="g.id">{{ g.name }}</li></ol></template></Game><Game><template v-slot="{games}"><h3 v-for="g in games" :key="g.id">{{ g.name }}</h3></template></Game></div></div>
</template><script setup lang="ts" name="Father">import Game from './Game.vue'
</script><style scoped>.father {background-color: rgb(165, 164, 164);padding: 20px;border-radius: 10px;}.content {display: flex;/* flex将所有竖向变成横向 均分开 */justify-content: space-evenly;}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;}img,video {width: 100%;}
</style>
子组件 game.vue
games在子组件中，父组件无法拿到，所以先需要给插槽传递 games
<template><div class="game"><h2>游戏列表</h2><!-- <ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul> --><!-- 给插槽里面传递 --><slot :games="games" x="哈哈" y="你好"></slot></div>
</template><script setup lang="ts" name="Game">import { reactive } from 'vue';let games = reactive([{id:'asgytdfats01',name:'英雄联盟'},{id:'asgytdfats02',name:'王者农药'},{id:'asgytdfats03',name:'红色警戒'},{id:'asgytdfats04',name:'斗罗大陆'}])
</script><style scoped>.game{width: 200px;height: 300px;background-color: skyblue;border-radius: 10px;box-shadow: 0 0 10px;}h2 {background-color: orange;text-align: center;font-size: 20px;font-weight: 800;}
</style>
这篇关于Vue10 组件通信-插槽的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
