【Vue8】插槽

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

插槽的使用场景

即什么时候使用插槽?
比如说这样:

【Vue8】插槽_第1张图片
原来的做法

我们想让子组件的

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

【Vue8】插槽_第2张图片
p标签被做了转义直接显示出来了

如果换成 v-html,用 ES6的写法
【Vue8】插槽_第3张图片
改成v-html

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

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

外层多了一个

包裹着
【Vue8】插槽_第4张图片
多了一个div

如果将 div换成 template模板占位符呢?
【Vue8】插槽_第5张图片
换成模板占位符

换了模板占位符,都没有渲染出来。
【Vue8】插槽_第6张图片
好像不行,连渲染都没有

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

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

我是插槽slot

父组件内插入一段

Dell

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

【Vue8】插槽_第7张图片
这样写

浏览器上看,两段 p标签是相连的,而不用被 div包围
【Vue8】插槽_第8张图片
i浏览器上看

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

slot定义默认值

之间也可以定义默认值。

【Vue8】插槽_第9张图片
定义的位置如下

如果上面那段子组件内的Dell内容消失,也就是未插入内容进来,浏览器上渲染是这样的。
【Vue8】插槽_第10张图片
显示默认内容

如果有插入值,默认内容不会被显示。

如果有多个slot呢?

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

【Vue8】插槽_第11张图片
如图

浏览器渲染出来是这样的:
【Vue8】插槽_第12张图片
页面的渲染效果变成了这样

为啥会这样呢? !!!∑(゚Д゚ノ)ノ
这里slot标签代表的是插槽的内容,那那两个都代表的是插槽的内容,会出现两次 headerfooter
解决方法是:

具名插槽

【Vue8】插槽_第13张图片
给它们都取上名字

将内容分别用 slot取好名字,然后在引入的插槽部分,通过调用 slotname属性,决定具体插入的是哪个槽。这样,浏览器上渲染出来的就是:
【Vue8】插槽_第14张图片
完美؏؏ᖗ乛◡乛ᖘ؏؏

作用域插槽

【Vue8】插槽_第15张图片
如图所示

想用 child组件去做一个列表的循环,但是列表项中的每一项具体怎么显示不关心,由外部来告诉。这个时候父组件往子组件传递 slot,告诉子组件怎么显示。
【Vue8】插槽_第16张图片
父组件模板部分要这样写

一定要写一个 template占位符,然后上面写上 slot-scope
重新捋一遍啊:
父组件在调用子组件的时候,给子组件传了一个插槽,这个插槽叫做作用域插槽,作用域插槽必须是 template开头和结尾的内容。
同时这个插槽要声明,从子组件接收的数据都放在哪,比如上图:slot-scope的意思是声明,从子组件接收的数据都放在props里,然后还要告诉子组件一个模板信息,接收到子组件的数据要如何展示?props.item来展示,这里的item是对应子组件内的 :item=item

作用域插槽应用场景:

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

Vue2.5新特性

你可能感兴趣的:(【Vue8】插槽)