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装一个数据库那么简单一样，因为你只有装了数据库你才能知道使用容器的方便啊。很多时候往往会因为学习忘了当初为了解决的问题。而学了一大堆也忘了一大堆因为都没有用上。所以方天客最后向我表达的意思大概就是如此吧。学习要根据实际分析问题并且沉淀自己的经验，当遇到了问题，当有了经验那些所谓的新技术新的文档就可以读得游刃有余。