Vue方向：v-slot指令以及动态插槽的使用

1、前言

        v-slot是由于在不久的将来，具名插槽和作用域插槽的用法即将被弃用而衍生的。

        v-slot指令自 Vue 2.6.0 起被引入，提供更好的支持slot和slot-scopeattribute 的 API 替代方案。v-slot完整的由来参见这份RFC。在接下来所有的 2.x 版本中slot和slot-scopeattribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。

 

2、使用v-slot处理具名插槽

        在向具名插槽提供内容的时候，可以在一个<template>元素上使用v-slot指令，并以v-slot的参数的形式提供其名称：

 

 

 

执行结果

        很显然，v-slot处理具名插槽，现在<template>元素中的所有内容都会将传入相应的插槽，任何没有被包裹在带有v-slot的<template>中的内容都会被视为默认插槽的内容。

 

 

执行结果

        注意：v-slot只能添加在<template>上

 

3、使用v-slot处理作用域

        绑定在 <slot> 元素上的attribute被称为插槽prop，现在在父级作用域中，可以使用带值得v-slot来定义提供的prop的名字。

 

 

执行结果

        v-slot插槽指令处理作用域插槽功能。

 

4、作用域插槽的特殊处理

        在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用，这样我们就可以把v-slot直接用在组件上。

 

        同时，也可以这样的简写形式去简化代码。

 

        这样的写法也可以，就像假定没有指明的内容对应默认插槽一样，不带参数的v-slot被假定对应默认插槽。但是这样简写不太建议使用，因为如果默认的插槽只有一个还好，一旦有多个，就不能这样使用。

 

5、动态插槽

        动态插槽是2.6新增的，动态指令参数可以用在v-slot上，来定义动态的插槽。

 

 

        此时template 标签上的v-solt指令参数是一个中括号, 中括号里的值将是一个变量,为当前父组件的数据

 

6、具名插槽的缩写

        具名插槽的缩写也是2.6.0新增的，跟v-on和v-bind一样，v-slot也有缩写，即把参数之前的所有内容(v-slot：)替换为字符 # 。例如 v-slot：header可以被重写为 #header：

 

 

执行结果

    和其他指令一样，该缩写只在它有参数的时候才可以用。

作者：听书先生1
链接：https://www.jianshu.com/p/0d54f6a65fda
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。