Vue3中slot插槽的几种使用实践

【1】默认插槽

父组件

<Category title="今日美食城市"><img :src="imgUrl" alt="">
</Category>

子组件

<div class="category"><h2>{{title}}</h2><slot>默认内容</slot>
</div>

父组件中Category 组件标签内的东西将会呈现在子组件slot的位置（进行替换）。

【2】具名插槽

也就是插槽会按照名字进行内容的替换。

父组件

// v-slot:s2 表示插槽名字为s2 ，简写方式为 #s2
<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>

子组件

<template><div class="category"><slot name="s1">默认内容1</slot><slot name="s2">默认内容2</slot></div>
</template>

【3】作用域插槽

理解： 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（新闻数据在News组件中，但使用数据所遍历出来的结构由App组件决定）

子组件

<template><div class="game"><h2>游戏列表</h2><slot :youxi="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>

父组件，params会拿到子组件的数据的数据{"youxi":[],"x":"哈哈","y":"你好"}

<template><div class="father"><h3>父组件</h3><div class="content"><Game><template v-slot="params"><ul><li v-for="y in params.youxi" :key="y.id">{{ y.name }}</li></ul></template></Game><Game><template v-slot="params"><ol><li v-for="item in params.youxi" :key="item.id">{{ item.name }}</li></ol></template></Game>// 这里直接解构youxi ，写法更简洁   <template v-slot="{youxi}">
//#default 其实就是 v-slot:default ，也就是插槽默认名字为default<Game><template #default="{youxi}"><h3 v-for="g in youxi" :key="g.id">{{ g.name }}</h3></template></Game></div></div>
</template><script setup lang="ts" name="Father">import Game from './Game.vue'
</script>

另外，作用域插槽也是可以有名字的，如下所示 v-slot:s1="params" ,s1表示插槽名字，params表示数据。

<Game><template v-slot:s1="params"><ol><li v-for="item in params.youxi" :key="item.id">{{ item.name }}</li></ol></template>
</Game>