【Vue8】插槽

插槽很重要！插件和模块中会经常使用插槽。

插槽的使用场景

即什么时候使用插槽？
比如说这样：

原来的做法
我们想让子组件的<p>标签下面跟一段内容，但是目前内容不知道写什么，是由父组件来决定。按照以往的做法，可能就是在子组件通过属性来传递（这里用的属性是content。这样写，浏览器上看是这样的。
p标签被做了转义直接显示出来了
如果换成v-html，用ES6的写法
改成v-html
这样写在浏览器上看，就不会出现上图那样<p>的情况了，但是我们查看源代码。发现<p>外层多了一个<div>包裹着
多了一个div
如果将div换成template模板占位符呢？
换成模板占位符
换了模板占位符，都没有渲染出来。
好像不行，连渲染都没有
所以通过content传值，想直接显示content的值，是不行的，必须得包裹一个div,
但是当我们要传递的内容很多的时候，难道要这样写？
难以接受啊
呸呸呸呸
Vue里面提供了一种新的语法slot-插槽

我是插槽slot

父组件内插入一段<p>Dell</p>，子组件内通过<slot></slot>用到插进来的内容，slot内显示的内容就是父组件向子组件内插进来的内容。

这样写
浏览器上看，两段p标签是相连的，而不用被div包围
i浏览器上看

通过插槽，我们可以更方便的向子组件传递DOM元素，同时子组件使用插槽内容也非常方便。

slot定义默认值

<slot></slot>之间也可以定义默认值。

定义的位置如下
如果上面那段子组件内的Dell内容消失，也就是未插入内容进来，浏览器上渲染是这样的。
显示默认内容
如果有插入值，默认内容不会被显示。

如果有多个slot呢？

比如说，组件内，我想传入一个header，一个footer，

如图
浏览器渲染出来是这样的：
页面的渲染效果变成了这样
为啥会这样呢？!!!∑(ﾟДﾟノ)ノ
这里slot标签代表的是插槽的内容，那那两个都代表的是插槽的内容，会出现两次header和footer。
解决方法是：

具名插槽

给它们都取上名字
将内容分别用slot取好名字，然后在引入的插槽部分，通过调用slot的name属性，决定具体插入的是哪个槽。这样，浏览器上渲染出来的就是：
完美؏؏ᖗ乛◡乛ᖘ؏؏

作用域插槽

如图所示
想用child组件去做一个列表的循环，但是列表项中的每一项具体怎么显示不关心，由外部来告诉。这个时候父组件往子组件传递slot,告诉子组件怎么显示。
父组件模板部分要这样写
一定要写一个template占位符，然后上面写上slot-scope。
重新捋一遍啊：
父组件在调用子组件的时候，给子组件传了一个插槽，这个插槽叫做作用域插槽，作用域插槽必须是template开头和结尾的内容。
同时这个插槽要声明，从子组件接收的数据都放在哪，比如上图：slot-scope的意思是声明，从子组件接收的数据都放在props里，然后还要告诉子组件一个模板信息，接收到子组件的数据要如何展示？props.item来展示，这里的item是对应子组件内的:item=item。

作用域插槽应用场景：

当子组件做循环或者某一部分DOM结构应该由外部传递进来的时候，这个时候用作用域插槽。
作用域插槽里，子组件可以向父组件的插槽传递数据，父组件的插槽如果想要接收这个数据，在外层必须要一个template，同时还要通过slot-scope对应的属性名来接收传递过来的数据，上面传递了一个item过来，在父组件的作用域插槽内就能接收到item。

Vue2.5新特性