Vue 插槽 slot 标签：
作用：让父组件可以向子组件指定的位置插入一段 html 结构，也属于一种组件之间的通信方式，适用于父传子
不使用插槽：
创建 List 组件，接收父元素传递的数据，用于显示分类列表。
<template> <div class="list"> <h3>{{ title }}分类</h3> <ul> <li v-for="(item, index) in listData" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { name: 'List', props: ['listData', 'title'] } </script> <style scoped> .list { background-color: skyblue; width: 200px; height: 300px; } .list h3 { text-align: center; background-color: orange; } </style>
在 Home 页面中引用 List 组件，并传递对应的数据。
<template> <div class="home"> <List title="美食" :listData="foods"></List> <List title="游戏" :listData="games"></List> <List title="电视剧" :listData="films"></List> </div> </template> <script> import List from "../components/List" export default { name: "Home", components: { List }, data() { return { foods: ['小龙虾', '火锅', '烧烤', '大闸蟹'], games: ['地下城与勇士', '穿越火线', '英雄联盟'], films: ['《三国》', '《水浒传》', '《西游记》', '《红楼梦》'] } } } </script> <style scoped> .home { display: flex; justify-content: space-around; } </style>
注：组件会根据数据渲染不同的内容，但结构都是一样的。如果想在组件中渲染不同的结构，就需要用到 slot 标签了。
备注：组件中的结构并不是一直不变的，有时候需要根据需求动态调整组件的结构内容。
默认插槽：
在 List 组件中，删除不确定的结构，替换为 slot 标签。并且 slot 标签还可以设置默认值。
<template> <div class="list"> <h3>{{ title }}分类</h3> <slot>默认值，如果没有传递具体的结构，显示的内容</slot> </div> </template> <script> export default { name: 'List', props: ['title'] } </script> <style> .list { background-color: skyblue; width: 200px; height: 300px; } .list h3 { text-align: center; background-color: orange; } .list img { width: 100%; } </style>
在 Home 页面，给每个 List 组件标签添加对应的内容即可。如果没有指定内容，就会显示 slot 标签中的默认值。
<template> <div class="home"> <List title="美食"> <img src="https://s1.ax1x.com/2023/03/22/ppaRcTI.jpg" alt=""> </List> <List title="游戏"> <ul> <li v-for="(item, index) in games" :key="index">{{ item }}</li> </ul> </List> <List title="电视剧"></List> </div> </template> <script> import List from "../components/List" export default { name: "Home", components: { List }, data() { return { games: ['地下城与勇士', '穿越火线', '英雄联盟'], } } } </script> <style scoped> .home { display: flex; justify-content: space-around; } </style>
注：组件标签中的结构在父组件中就会被解析，而不是先传到 slot 中再解析。所以数据要放在父组件中渲染，而样式放在父组件或子组件中都可以。
具名插槽：
如果组件中需要多个插槽，就需要给 slot 标签定义名称了，用于区分存放的内容。
<template> <div class="list"> <h3>{{ title }}分类</h3> <slot name="content">第一个插槽</slot> <slot name="footer">第二个插槽</slot> </div> </template> <script> export default { name: 'List', props: ['title'] } </script> <style> .list { background-color: skyblue; width: 200px; height: 300px; } .list h3 { text-align: center; background-color: orange; } .list img { width: 100%; } .list div { display: flex; } .list a { display: block; width: 100%; text-align: center; margin-top: 30px; } </style>
在使用组件时，需要给内容添加 slot 属性，用于指定放到哪个 slot 标签中。
<template> <div class="home"> <List title="美食"> <img slot="content" src="https://s1.ax1x.com/2023/03/22/ppaRcTI.jpg" alt=""> <a slot="footer" href="https://www.baidu.com">更多美食</a> </List> <List title="游戏"> <ul slot="content"> <li v-for="(item, index) in games" :key="index">{{ item }}</li> </ul> <div class="foot" slot="footer"> <a href="https://www.baidu.com">单机游戏</a> <a href="https://www.baidu.com">网络游戏</a> </div> </List> <List title="电视剧"> <p>如果不定义slot属性，是不会显示的</p> </List> </div> </template> <script> import List from "../components/List" export default { name: "Home", components: { List }, data() { return { games: ['地下城与勇士', '穿越火线', '英雄联盟'], } } } </script> <style scoped> .home { display: flex; justify-content: space-around; } </style>
注：如果不给内容添加 slot 属性，页面中是不会显示这块内容的。例如第三个分类。
备注：还可以使用 v-slot:名称 的方式指定，但是 v-slot 只能在 template 标签中使用。
<List title="电视剧"> <template v-slot:footer> <p>如果不定义名称，是不会显示的</p> </template> </List>
原创作者：吴小糖
创作时间：2023.8.26
