前端黑洞网 首页
资源下载

前端电子书

前端视频教程

前端小游戏

前端脚本

前端项目实战

其他资源

博客 问答 程序员的那些事
写博客 注册
本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(7)

Vue.js : 插槽slot的使用

发布于2021-03-13 18:39     阅读(1056)     评论(0)     点赞(27)     收藏(0)

一丶插槽slot


（一）slot翻译为插槽

  • 插槽的目的是让我们原来的设备具有更多的扩展性
  • 比如电脑的USB插槽，可以插入U盘，键盘，鼠标等

（二）组件的插槽

  • 组件的插槽也是为封装的组件更具有扩展性
  • 组件内部的展示什么，由外界来决定

插槽即预留的空间。一般定义可复用性组件时，使用插槽

二丶插槽基本使用

  • 代码
  1.  
  2. <!--作者：ikunsdc-->
  3. <!--开发时间：2021/03/11 00:08-->
  4.  
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.   <meta charset="UTF-8">
  9.   <title>Title</title>
  10. </head>
  11. <body>
  12. <!--1.插槽的基本使用，<slot></slot>-->
  13. <!--2.插槽的默认值 <slot>button</slot>-->
  14. <!--3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素-->
  15. <div id="app">
  16.   <cpn><button>按钮</button></cpn>
  17.   <cpn>
  18.     <i>呵呵呵</i>
  19.     <div>我是DIV元素</div>
  20.     <p>我是段落</p>
  21.   </cpn>
  22.   <cpn></cpn>
  23. </div>
  24.  
  25. <template id="cpn">
  26.   <div>
  27.     <h2>我是key</h2>
  28.     <p>我是内容</p>
  29.     <slot></slot>
  30.     <hr>
  31.   </div>
  32. </template>
  33.  
  34. <template id="cpn2">
  35.       <slot></slot>
  36.       <hr>
  37.     </div>
  38.   </template>
  39.  
  40. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  41. <script>
  42.   const app = new Vue({
  43.     el:"#app",
  44.     data:{
  45.  
  46.     },
  47.     components:{
  48.       cpn:{
  49.         template:'#cpn'
  50.       }
  51.     }
  52.   })
  53. </script>
  54. </body>
  55. </html>
  56.
  • 运行 

 

三丶具名插槽的使用 

当组件中由多个插槽时，给每个插槽命名，调用时指定替换哪个插槽

  • 代码
  1. <!--作者：ikunsdc-->
  2. <!--开发时间：2021/03/11 00:08-->
  3.  
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7.   <meta charset="UTF-8">
  8.   <title>Title</title>
  9. </head>
  10. <body>
  11. <div id="app">
  12.   <cpn>
  13.  
  14.   </cpn>
  15.   <hr>
  16.   <cpn>
  17. <!--    替换时，根据名字，指定替换某个插槽-->
  18.     <span slot="center">标题</span>
  19.     <span slot="left">返回</span>
  20.     <span slot="right">更多</span>
  21.   </cpn>
  22. </div>
  23.  
  24. <template id="cpn">
  25.   <div>
  26. <!--   给slot取名， slot中间均是默认值-->
  27.   <slot name="left"><span>左边</span></slot>
  28.   <slot name="center"><span>中间</span></slot>
  29.   <slot name="right"><span>右边</span></slot>
  30.   </div>
  31. </template>
  32. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  33. <script>
  34.   const app = new Vue({
  35.     el:"#app",
  36.     data:{
  37.  
  38.     },
  39.     components:{
  40.       cpn:{
  41.         template:'#cpn'
  42.       }
  43.     }
  44.   })
  45. </script>
  46.  
  47. </body>
  48. </html>
  • 运行

 

                                                                                                 ——  Git ——

原文链接:https://blog.csdn.net/m0_55331605/article/details/114649928




所属网站分类: 技术文章 > 博客

作者：程序员的人生

链接：http://www.qianduanheidong.com/blog/article/35782/56afc6d3baec64cf2d68/

来源：前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

27 0
收藏该文
已收藏

评论内容：(最多支持255个字符)




程序员的那些事(new)

window属性：controllers

如何用Idea或者webstorm跑一个Vue项目

“我对技术架构的理解与架构师角色的思考” 读后感

程序员狂怒：薪水被应届生倒挂了，很不爽，天王老子也别想留住我！

荐 结合论文看Youtube推荐系统中召回和排序的演进之路（中）篇

11个编程接单的网站，你有技术就有收入，有收入就有女朋友《男盆友》

身为程序员——你还不知道这十几个网站？

让微信 8.0 「裂开」「炸弹」的特效代码来了

35岁的程序员：第20章，解脱

在IDEA 2020.3.1中部署Tomcat并且创建第一个web项目

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

全网最详细的nodejs卸载和安装教程

web期末大作业--网页设计 HTML+CSS+JS（附源码）

2024·2025年前端开发的就业现状及前景

基于天地图使用Leaflet.js进行WebGIS开发实战

记录｜C#主界面设计【Web风格】

Roundcube Webmail安装与配置完全指南

Spring Boot Web 应用请求响应太慢故障排查

Markdown 语法大全详解

uniapp前端实现微信支付（小程序、公众号H5、app）

pc端web网站使用第三方微信登录流程（web、js）

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

如何使用 php 向电子邮件提交表单

将图像文件添加到 JSON 对象并在 HTML 中显示它？

Div 容器不会以百分比形式占据屏幕尺寸[重复]

如何在 angular 6 中在两个组件之间共享 http 响应？

为什么图像在 angular 2 中渲染效果不好

如何使用js跳过div？

css 网格的动态分配行高会随着内容的增加而拉伸

CSS 如何从底部向上增加高度

按数据值对列表项进行排序

以 json 或 html 形式返回数据库结果

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站