vue slot 插槽

第一次接触vue插槽的时候我也觉得很奇怪,然后去看了官方文档也没看懂,父组件调用子组件的方法很通用,这里举个例子,回忆一下父组件调用子组件的方式。


image.png

这样就有了一个子组件,那这时候我们再从父组件去调用它

image.png

有用过组件的同学我相信都了解以上代码的意思。但这里我多嘴再说一下
import Child from './Child.vue' //指从当前路径下面引入主键
components:{
'child': Child //注册主键
}
然后在 父主键这里直接用xml的方式<child/>就可以调用主键啦。那么引用组件看上去就那么一回事,那么现在问题来了我想要在这个子组件里面添加html模板。这时候该怎么做。那么这时候有些同学就开始跳了,我引用一个组件为什么要在这个组件里面插东西呢?我直接在子主键里面写就好了为什么要插东西进去了。这个插字就是我要说得vue插槽。插槽的作用就是往子组件里面添加html模板。好,这时候看我的表演,我相信肯定很多同学用过elemen-ui 提供的组件el-table,它还有个子组件想必大家都用过的<el-table-column/>,它也属于子组件,大家都用过它来显示表的列字段。那么我相信同学们一定见过这样的表。

image.png

表格中有删除和修改字段的列,操作它对于我们而言属于子组件,对于父组件的我们当然要在这里面插入按钮的了,说官方一点就是插入html模板,如果还和同学们之前说的那样写在子组件里面的话,那么我调用的所有的<el-table-column/>为了满足特定的需求我要做成对应的子组件如<el-table-column-button>这个样子我相信大家一定很不喜欢吧。而且调用父类要让子类使用的参数也特别的不方便。这就是插槽的作用,下面这段代码我相信绝大部分的同学肯定都用过都会背了。
image.png

是不是很熟悉,在子组件<el-table-column></el-table-column>标签中的xml文本,就是父类引用子组件时让子组件显示html模板。就好像上面代码区中的删除与修改按钮。这就是插槽。
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示。这里我引用云荒杯倾作者在他文章中写的例子。

在文章中开头的两个代码块中我相信同学们已经知道了如何注册一个组件并且如何引用自己的组件。那么插槽的作用就是为了把父组件在子组件标签中写入的html模板在子组件中显示出来。


image.png

如上图的代码父组件引用了子组件并在子组件中插入了html文本,那么在子组件中我该如何渲染这部分html文本呢? 插槽!插槽!插槽!<slot></slot>就是这个标签了。


image.png

当父组件在子组件中插入html模板的后父组件的html模板就会渲染在子组件的<slot/>标签处,在子组件中这快html模板就可以在子组件中通过<slot/>被任意调用,叫好像普通的xml标签一样。与父组件引用子组件的方式一样子组件引用父组件的html模板。只不过调用的方式不一样而已。

我不知道大家看到这篇文章有什么感想哈,总之我是尽可能的写到大家能理解为止。vue 插槽曾经困扰过我一段时间,官方文档对它的阐述我也没看懂(当然我指的是我个人我相信你们都很厉害)。本文是我在阅读完云荒杯倾作者的这篇文章后的感想。其实一开始我也没看懂这篇文章,因为我并不知道vue的插槽有什么作用它为什么要把父组件的html模板渲染在子组件上我很不能理解这样的行为,但直到我想起<el-table-column/>操作列中的 删除与修改按钮的时候我才知道了vue 插槽的作用,所以我在文章想尽可能的表明它的作用再粗俗的说它怎么用。当然它的用法还有很多在文章中我并没有完全阐述出来。我非常推荐大家去阅读云荒杯倾的文章。他写得比较清楚。

该篇文章主要是围绕这vue插槽有什么作用,能做什么来阐述说明的。当然如果文章中有错误的地方欢迎大家随便骂。我一定好好改。

接下去这一段是写给我自己的

我第一次学习vue插槽的时候是在2017年10月份的时候,为什么我到现在还不懂呢?因为我确实不知道它的作用是什么,导致我一直记得有这个方法但是没什么用。当你不知道你学习的东西用来做什么的时候你学习它真的会特别的吃力。就好像过去学习docker一样,为了方便部署服务和软件的东西被当做虚拟机来用,最后不知道它干嘛也就放弃了学习它。所以我觉得不要盲目跟风的去学习,而是先去实践遇到问题了需要解决方案的时候再去寻找它此时你会发现目的真的很明确,就好像为什么用docker装一个数据库那么简单一样,因为你只有装了数据库你才能知道使用容器的方便啊。很多时候往往会因为学习忘了当初为了解决的问题。而学了一大堆也忘了一大堆因为都没有用上。所以方天客最后向我表达的意思大概就是如此吧。学习要根据实际分析问题并且沉淀自己的经验,当遇到了问题,当有了经验那些所谓的新技术新的文档就可以读得游刃有余。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,050评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,207评论 0 6
  • 9.1 什么是组件? 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,...
    白水螺丝阅读 774评论 0 2
  • 啦咔咔啦啦咔咔啦啦啦咔咔啦
    清如许1203阅读 201评论 0 0
  • 如今,无论判断多好,企业转型意愿多强,如果不能激活人、释放人,就没有办法应对今天的世界。 通过激发个体内在价值来激...
    郭强GQ阅读 441评论 0 0