插槽(slot)

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件
分类：默认插槽、具名插槽、作用域插槽
<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。

默认插槽

category.vue

<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div>
</template><script>export default {name:'category',props:['title']}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>

App.vue

<template><div class="container"><category title="美食" ><img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""></category><category title="游戏" ><ul><li v-for="(g,index) in games" :key="index">{{g}}</li></ul></category><category title="电影"><video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></category></div>
</template><script>import category from './components/category'export default {name:'App',components:{category},data() {return {foods:['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好，李焕英》','《小鞋子》']}},}
</script><style scoped>.container{display: flex;justify-content: space-around;}
</style>

显示：

具名插槽

<slot> 元素有一个特殊的 attribute：name。通过该属性可以将内容放在指定的插槽里。

category.vue

<template><div class="category"><h3>{{title}}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现1</slot><slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现2</slot></div>
</template><script>export default {name:'Category',props:['title']}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>

App.vue：

v-slot:xxx 只能添加在 <template> 上（推荐）
slot="xxx"可以用在一个普通元素上（自 2.6.0 起被废弃）

<template><div class="container"><category title="美食" ><img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt=""><a slot="footer" href="http://www.atguigu.com">更多美食</a></category><category title="游戏" ><ul slot="center"><li v-for="(g,index) in games" :key="index">{{g}}</li></ul><div class="foot" slot="footer"><a href="http://www.atguigu.com">单机游戏</a><a href="http://www.atguigu.com">网络游戏</a></div></category><category title="电影"><video slot="center" controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><template v-slot:footer><div class="foot"><a href="http://www.atguigu.com">经典</a><a href="http://www.atguigu.com">热门</a><a href="http://www.atguigu.com">推荐</a></div><h4>欢迎前来观影</h4></template></category></div>
</template><script>import category from './components/category'export default {name:'App',components:{category},data() {return {foods:['火锅','烧烤','小龙虾','牛排'],games:['红色警戒','穿越火线','劲舞团','超级玛丽'],films:['《教父》','《拆弹专家》','《你好，李焕英》','《小鞋子》']}},}
</script><style scoped>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
</style>

作用域插槽

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

category.vue：

<template><div class="category"><h3>{{title}}分类</h3><slot :games="games" msg="hello">我是默认的一些内容</slot></div>
</template><script>export default {name:'Category',props:['title'],data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽'],}},}
</script><style scoped>.category{background-color: skyblue;width: 200px;height: 300px;}h3{text-align: center;background-color: orange;}video{width: 100%;}img{width: 100%;}
</style>

App.vue：

scope 只可以用于 <template> 元素，其它和 slot-scope 都相同（已被移除）。
slot-scope 用于将元素或组件表示为作用域插槽，可以接收传递给插槽的 prop 。（在 2.5.0+ 中替代了 scope，自 2.6.0 起被废弃）
推荐使用v-slot，默认插槽只传递参数v-slot="xxx"，具名插槽v-slot:名字="xxx"

<template><div class="container"><category title="游戏"><template scope="joney"><ul><li v-for="(g,index) in joney.games" :key="index">{{g}}</li></ul></template></category><category title="游戏"><template scope="{games}"><ol><li style="color:red" v-for="(g,index) in games" :key="index">{{g}}</li></ol></template></category><category title="游戏"><template slot-scope="{games}"><h4 v-for="(g,index) in games" :key="index">{{g}}</h4></template></category><category title="游戏">     <template v-slot="{games}">        <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>      </template>    </category></div>
</template><script>import category from './components/category'export default {name:'App',components:{category},}
</script><style scoped>.container,.foot{display: flex;justify-content: space-around;}h4{text-align: center;}
</style>

Vue2中插槽使用——默认插槽、具名插槽、作用域插槽相关推荐

【vue3】使用JSX实现普通、具名和作用域插槽
最近在vue3构建的项目中使用到了JSX(不得不说JSX用起来的感觉就是清爽).但是前段时间遇到了一个问题,vue template中的slot插槽如何在JSX中实现呢?查了很久资料.文档都很难找到一 ...
Vue中slot的使用(具名插槽与作用域插槽)
文章目录前言一.什么是插槽二.前期准备三.具名插槽的使用 1.子组件配置slot 2.使用者App.vue配置数据 3.结果展示 4.具名插槽总结四.作用域插槽的使用 1.子组件配置slot ...
细说Vue作用域插槽，匹配应用场景。
最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...
作用域插槽、slot-scope、v-slot指令
作用域插槽.slot-scope.v-slot指令作用域插槽可以让父组件拿到子组件中的数据,并使用. 作用域插槽的使用和scope 子组件 <slot :game="game&quo ...
【Vue2.0】—默认插槽、具名插槽、作用域插槽（二十四）
[Vue2.0]-默认插槽.具名插槽.作用域插槽(二十四) 默认插槽.具名插槽 Cateory.vue文件 <template><div class="cateory&qu ...
Vue —— 进阶插槽（slot）（默认插槽、具名插槽和作用域插槽）
Vue全家桶系列文章目录内容参考链接 Vue2.x - 基础 Vue2.x - 基础 Vue2.x - 进阶(零) 初始化脚手架 Vue2.x - 进阶(一) refs属性.props配置项 V ...
[vue] slot插槽默认插槽，具名插槽，作用域插槽
文章目录插槽不使用插槽效果分析默认插槽效果分析具名插槽效果分析作用域插槽效果分析再次理解作用域插槽代码: 默认插槽: 具名插槽作用域插槽插槽作用:让父组件可以向子组 ...
Vue3 slot插槽——（默认插槽、具名插槽、作用域插槽）
一.认识插槽Slot 在开发中,我们会经常封装一个个可复用的组件: 前面我们会通过props传递给组件一些数据,让组件来进行展示: 但是为了让这个组件具备更强的通用性,我们不能将组件中的内容限制为固定 ...
Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项
Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽父组件标签内写的所有内容都放在插槽中父组件: <h1>我是父组件</h1><base-b ...

Vue2中插槽使用——默认插槽、具名插槽、作用域插槽

Vue中插槽使用——默认插槽、具名插槽、作用域插槽

插槽(slot)

默认插槽

具名插槽

作用域插槽

Vue2中插槽使用——默认插槽、具名插槽、作用域插槽相关推荐

最新文章

热门文章