【Vue8】插槽

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

插槽的使用场景

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

原来的做法

我们想让子组件的

标签下面跟一段内容，但是目前内容不知道写什么，是由父组件来决定。按照以往的做法，可能就是在子组件通过属性来传递（这里用的属性是content。这样写，浏览器上看是这样的。

p标签被做了转义直接显示出来了

如果换成 v-html，用 ES6的写法

改成v-html

这样写在浏览器上看，就不会出现上图那样

的情况了，但是我们查看源代码。发现

外层多了一个

包裹着

多了一个div

如果将 div换成 template模板占位符呢？

换成模板占位符

换了模板占位符，都没有渲染出来。

好像不行，连渲染都没有

所以通过 content传值，想直接显示 content的值，是不行的，必须得包裹一个 div,
但是当我们要传递的内容很多的时候，难道要这样写？

难以接受啊

呸呸呸呸
Vue里面提供了一种新的语法 slot-插槽

我是插槽slot

父组件内插入一段

Dell

，子组件内通过用到插进来的内容，slot内显示的内容就是父组件向子组件内插进来的内容。

这样写

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

i浏览器上看

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

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新特性