【Vue8】插槽【Vue8】插槽

【【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。