<vue 组件 4、插槽的使用>
代码结构
一、 01-slot-插槽的基本使用
1、 效果
同样的一个插槽,父组件调用的时候不同展现的内容就不同
2、代码
01-slot-插槽的基本使用.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> </head> <body> <!-- 1.插槽的默认值 <slot>button</slot> 2.如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素 --> <div id= "app" > <cpn></cpn> <cpn><span>哈哈哈</span></cpn> <cpn><i>呵呵呵</i></cpn> <cpn> <div>我是div元素</div> <p>我是p元素</p> </cpn> </div> <template id= "cpn" > <div> <h2>我是组件</h2> <slot><button>按钮</button></slot> </div> </template> <script src= "vue.js" ></script> <script> let app = new Vue({ el: '#app' , data: { message: '你好' }, components: { cpn: { template: '#cpn' } } }) </script> </body> </html> |
二、 02-slot-具名插槽的使用
1、 效果
给插槽起名字,父组件调用的时候指定替换哪个插槽的内容
2、代码
02-slot-具名插槽的使用.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> </head> <body> <div id= "app" > <cpn></cpn> ------------------------ <cpn><span slot= "center" >标题</span></cpn> ---------------------------- <cpn><button slot= "left" >返回</button></cpn> </div> <template id= "cpn" > <div> <slot name= "left" ><span>左边</span></slot> <slot name= "center" ><span>中间</span></slot> <slot name= "right" ><span>右边</span></slot> </div> </template> <script src= "vue.js" ></script> <script> let app = new Vue({ el: '#app' , data: { message: '你好啊' }, components: { cpn: { template: '#cpn' } } }) </script> </body> </html> |
三、 03-slot-绑定数据及展现方式
1、效果
给插槽绑定数据,调用的时候还可以指定数据的不同展现形式
2、代码
03-slot-绑定数据及展现方式.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>Title</title> </head> <body> <div id= "app" > <cpn></cpn> ------------------------------------- <cpn> <!--目的是获取子组件中的pLanguages--> <template slot-scope= "slot" > <span>{{slot.data.join( ' - ' )}}</span> </template> </cpn> ------------------------------------- <cpn> <!--目的是获取子组件中的pLanguages--> <template slot-scope= "slot" > <span>{{slot.data.join( ' * ' )}}</span> </template> </cpn> </div> <template id= "cpn" > <div> <slot :data= "pLanguages" > <ul> <li v- for = "item in pLanguages" >{{item}}</li> </ul> </slot> </div> </template> <script src= "vue.js" ></script> <script> let app = new Vue({ el: '#app' , data: { message: '你好啊' }, components: { cpn: { template: '#cpn' , data() { return { pLanguages: [ 'JavaScript' , 'C++' , 'Java' , 'C#' , 'Python' , 'Go' , 'Swift' ] } } } } }) </script> </body> </html> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!