vue - 插槽slot
描述:插槽,也就是slot,是组件的一块HTML模板,一个slot最核心的两个问题是显示不显示和怎样显示
插槽分类:
1.1 单个插槽(单个插槽,别名默认插槽、匿名插槽,不用设置name属性)
1.2 具名slot(插槽加了name属性,就变成了具名插槽。具名插槽可以在一个组件中出现N次,出现在不同的位置)
1.3 作用域slot(vue2.5版本中slot-scope取代了scope,来实现作用域插槽,主要用在组件调用中,具体在template标签上面使用slot-scope来获取插槽slot上面的属性值,获取值的为一个对象,slot-scope=”它可以取任意字符串”,在element-ui的组件中经常看到)
<!-- 单个插槽--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <children1> <span>12345</span> </children1> </div> <script type="text/javascript"> var app = new Vue({ el: '#app', components: { children1: { template: "<button><slot></slot>单个插槽</button>" } } }); </script> </body> </html>
1 <!-- 具名插槽 --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <title>Document</title> 10 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11 </head> 12 13 <body> 14 <div id="app"> 15 <children2> 16 <span slot="first" @click="tobeknow">12345</span> 17 <span slot="second">56789</span> 18 </children2> 19 </div> 20 21 <script type="text/javascript"> 22 var app = new Vue({ 23 el: '#app', 24 methods: { 25 tobeknow: function () { 26 console.log("It is the parent's method"); 27 } 28 }, 29 components: { 30 children2: {//这个无返回值,不会继续派发 31 template: "<button><slot name='first'></slot>具名插槽,<slot name='second'></slot></button>" 32 } 33 } 34 }); 35 </script> 36 </body> 37 38 </html>
1 <!-- 作用域插槽 --> 2 <!DOCTYPE html> 3 <html lang="en"> 4 5 <head> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 9 <title>Document</title> 10 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 11 </head> 12 13 <body> 14 <div id="app"> 15 <!-- 将数据传递给组件 --> 16 <tb-list :data="data"> 17 <!-- 获取slot上面的值 --> 18 <template slot-scope="scope"> 19 <p>索引:{{JSON.stringify(scope)}}</p> 20 <p>索引:{{scope.$index}}</p> 21 <p>姓名:{{scope.row.name}}</p> 22 <p>年龄: {{scope.row.age}}</p> 23 <p>性别: {{scope.row.sex}}</p> 24 </template> 25 </tb-list> 26 </div> 27 28 <script type="text/javascript"> 29 var app = new Vue({ 30 el: '#app', 31 data: { 32 data: [{ 33 name: 'kongzhi1', 34 age: '29', 35 sex: 'man' 36 }] 37 }, 38 components: { 39 // 作用域slot 40 'tb-list': { 41 template: 42 `<ul> 43 <li v-for="(item, index) in data"> 44 <slot :row="item" :$index="index"></slot> 45 </li> 46 </ul>`, 47 // 获取值 48 props: ['data'] 49 } 50 } 51 }); 52 </script> 53 </body> 54 55 </html>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现