vue2到vue3中插槽slot变化详解---从slot，slot-scope到v-slot的变化

文章目录

前言
默认插槽
具名插槽
作用域插槽
解构prop的写法
v-solt 默认插槽
独占默认插槽
v-solt具名插槽
v-solt作用域插槽
解构props的写法
动态插槽名
插槽的缩写

前言

vue 插槽，目前到3.0有2种方式，第一种，在2.6之前使用的是slot 和 slot-scpe 2.6后已被官方废弃，但在2.x版本仍被支持，第二种是vue 在2.6版本后更新的新指令 v-slot 来替代slot 和slot-scpe

那么什么是插槽呢，作用又是什么

插槽，简单说，插槽就是杯子，杯子里面装的是饮料还是牛奶，由外部倒入什么来决定，就好比下面的代码，我需要一个子组件，他有部分内容，需要根据我当前页面需要来展示，我如何将html模板传人到子组件就需要使用插槽。

所以我定义了一个子组件item，我用solt标签定义了一个默认插槽，为在父组件使用时，需要传递到item组件的模板，占个位置，这样我在组件，使用item子组件，在其中编写，html模板就会被渲染到子组件

默认插槽

父组件
<template>
<tab><item ><div>装一杯牛奶</div><item><tab>
</template>//item子组件<template><div><slot ></slot>//默认插槽   在父组件使用item子组件，item标签包裹的内容将默认被渲染到子组件的                                     solt中<h1>我是杯子  </h1></div></template>

这样的好处，显而易见，可以让组件模块化更清晰，同时复用性更高，不至于，我要一杯茶，我就要定义一个组件，我要一杯牛奶我又定义一个组件，有了插槽，我只需要定义一个杯子，要喝什么由使用的传人决定。

上述代码也叫默认插槽，就是默认把模板全部渲染到solt中，如果需要指定渲染，就需要使用具名插槽,简单说就是起一个名字，告诉他小红该坐那儿，小明该坐那儿

具名插槽

//父级
<template><div><layout><div solt="header">头部标题</div><div >显示的内容</div><div  slot="footer">尾部</div></layout></div>
</template>//layout子组件
<template><div><layout><h1>layout子组件</h1><slot name="header"></slot> //这种就叫具名插槽<slot></slot> //如果不指定名字，就会将模板中未匹配到的内容渲染到默认插槽中，这里为显示的内容<slot name="footer"></slot></layout></div>
</template>

**tip：**当你的子组件中如layout 中并不存在，slot这个元素，那么在父页面中这个标签中的内容都会被抛弃

作用域插槽

父组件提供了模板给子组件，那么子组件如何反馈给父组件呢，例如：我定义了一个杯子，我需要告诉使用的人，我这个杯子，只能装300mL，这时我们就需要用slot-scope来接收子组件上通过v-bind绑定的值。

作用域插槽，就是能让插槽内容访问到子组件中才有的数据

//父级
<template><div><cup><div solt="size" slot-scope="data">{{data.msg}}</div></cup></div>
</template>

//cup子组件
<template><div><slot name="size" :msg="msg"></slot></div>
</template>
<script>
export default {data(){return{msg:'300mL大小的杯子'}}
}
</script>

解构prop的写法

下面写法等同上面

//父级
<template><div><cup><div slott="size" slot-scope="{msg}">{{msg}}</div></cup></div>
</template>

上述是vue2.6之前的版本，之后vue官方废弃了上面的语法，改为v-solt来代替，然后大家就想知道，区别在哪呢

首先就是用一个指令合并了solt 和solt-scope2个attribute,写法更加简洁，其次就是语义化更明显

2.6之前的写法会出现作用域混淆的问题

例：

<one><two slot-scope="one"> //接受到的作用域，是外层one组件的，而不是当前组件two<three slot-scope="two"><template slot-scope="three">{{ one }} {{ two }} {{ three }}</template></three></two>
</one>

如上述代码一层子组件时，你能清晰的看清作用域是哪一个组件的，但多层嵌套后，每一层接收的作用域是外层组件的而不是当前组件的，这样，就会不清晰，所以vue希望能实现，当前组件，接受当前组件的作用域

于是就有了v-solt 下面是改良后的代码，是否更加的清晰了

<one v-slot="one"><twotwo v-slot="two">  //接收到的作用域为当前two组件的<three v-slot="three">{{ one }} {{ two }} {{ three }}</three></bar>
</one>

如果没看懂那么下面来阐述，v-solt的使用变化，

v-solt 默认插槽

和原来不同便是，原来的solt属性可以定义在任何元素上，现在v-solt只能是template元素上，只有一种额外情况，就是独占默认插槽，我们先看常规情况。v-slot:default这种就是具名的写法

父组件
<template><item > <template v-slot:default> // v-slot:default可以不加,只能定义在template上<div>装一杯牛奶</div></template><item>
</template>//item子组件<template><div><slot ></slot>//默认插槽   <h1>我是杯子  </h1></div></template>

未具名的solt 元素，自动默认名为default 你可以不写，当然如果你要看的更清晰，

独占默认插槽

提供内容只有默认插槽，上述就满足此条件，所以我们可以这样写

父组件
<template><item v-slot:default> //v-slot:default可以不加<div>装一杯牛奶</div><item>
</template>//item子组件<template><div><slot ></slot>//默认插槽   <h1>我是杯子  </h1></div></template>

v-solt具名插槽

//父级
<template><div><layout><template v-slot:header>//v-slot指令使用插槽<div >头部标题</div></template><div >显示的默认内容</div><!--或者<template v-slot:default><div >显示的默认内容</div></template>   --><template v-slot:footer><div >尾部</div></template></layout></div>
</template>//layout子组件
<template><div><layout><h1>layout子组件</h1><slot name="header"></slot> //这种就叫具名插槽<slot></slot> //如果不指定名字，就会将模板中未匹配到的内容渲染到默认插槽中，这里为显示的内容<slot name="footer"></slot></layout></div>
</template>

v-solt作用域插槽

这是改动最大地方

//父级
<template><div><cup><template v-slot:default="data"> //具名写法<div>{{data.msg}}   </div></template><!--或者<template v-slot="data"><div > {{data.msg}}   </div></template>    --></cup></div>
</template>

//cup子组件
<template><div><slot  :msg="msg"></slot ></div>
</template>
<script>
export default {data(){return{msg:'300mL大小的杯子'}}
}
</script>

当为独占默认插槽时，v-solt可以省略default不写

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确下面是官方的例子

<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">{{ slotProps.user.firstName }}<template v-slot:other="otherSlotProps">slotProps is NOT available here</template>
</current-user>

所以当出现多个插槽的时候，请使用完整的基于template 的语法

解构props的写法

这里使用上面cup组件的例子

<template><div><cup><template v-slot:default="{msg}"> //解构<div>{{msg}}   </div></template></cup></div>
</template>

v-slot 的解构还提供重命名的写法

<template><div><cup><template v-slot:default="{msg : size}"> //别名<div>{{size}}   </div></template></cup></div>
</template>

动态插槽名

v-slot 支持2.6的动态参数写法

<layout><template v-slot:[attributeName]>...</template>
</layout>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 "header"，那么这个绑定将等价于 v-slot:header。

插槽的缩写

2.6后插槽可以把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

v-slot:后面必须有值，不可写成#="{data}"

<template><div><cup><template #default="msg"> <div>{{size}}   </div></template></cup></div>
</template>