第二十四节:带你梳理Vue2 : Vue具名插槽/作用域插槽/v-slot指令

1. 具名插槽

1.1 没有使用具名插槽的问题

有的时候我们在使用子组件时,在子组件模板上不同的位置插入不同的内容, 只有一个插槽显然没法满足我们的需求,看示例:

需求如下:

子组件是一篇文章的结构
父组件在调用子组件是给文章插入标题,正文,时间信息

示例代码如下:

<div id="app"><!-- 使用组件 --><my-child ><h2>这是一篇介绍vue插槽的文章</h2><p>这是文章的第一段</p><p>这是文章的第二段内容</p><p>这是文章的第三段内容</p><span>2020年5月1日</span></my-child></div><!-- 组件模板 -->
<template id="mychild"><div class="article"><div class="title"><slot></slot></div><div class="contont"><slot></slot></div><div class="time"><slot></slot></div></div>
</template><script>javascript">//  组件选项对象let MyChild = {template: `#mychild`};//  实例中注册组件const vm = new Vue({el:"#app",components: {MyChild}})</script>

结果:

具名插槽.png

示例结果说明:

通过示例结果发现和我们想的天差地别,此时每一个插槽都插入了所有的内容, 显然不符合预期
那么我们怎样才能将分发的内容指定到每一个具体的插槽上呢.

这个时候我们就需要给每个插槽指定名字

1.2 使用具名插槽和默认插槽

<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

未使用name属性的slot插槽被称匿名插槽, 也可以叫做默认插槽. 我们在子组件中仍然可以有一个匿名插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

使用具名操作重写上面的示例:

<div id="app"><!-- 使用组件 --><my-child ><h2 slot="title">这是一篇介绍vue插槽的文章</h2><p>这是文章的第一段</p><p>这是文章的第二段内容</p><p>这是文章的第三段内容</p><span slot="time">2020年5月1日</span></my-child></div><!-- 组件模板 -->
<template id="mychild"><div class="article"><div class="title"><slot name="title">这里是标题内容的插槽</slot></div><div class="contont"><slot>这里是默认插槽</slot></div><div class="time"><slot name="time">这里是时间的插槽</slot></div></div>
</template><script>javascript">//  组件选项对象let MyChild = {template: `#mychild`};//  实例中注册组件const vm = new Vue({el:"#app",components: {MyChild}})
</script>

结果:

具名插槽2.png

此时我们就会发现,分发的内容以及正常插入到对应的插槽上了

通过上面的例子我们就知道了,slot如果没有显示的使用name属性指定插槽的名字,那么slot默认有个名字default,默认插槽,如果在分发内容时,没有指定插槽,所有的内容都将默认插到默认插槽上

2. 作用域插槽

2.1 作用插槽的理解和使用

通过学习我们知道,插槽的内容最后是在子组件模板上渲染的, 那么就会在有得时候需要在分发的内容中使用子组件中才有的数据,怎么办呢. 这个时候就要用到作用域插槽了

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

简而言之,就是利用slot 标签将子组件的数据传递到分发内中上,就像prop传递数据给组件一样

在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 props 对象：

示例:

<div id="app"><!-- 使用组件 --><my-child ><template slot-scope="props"><button>{{ props.text }}</button></template></my-child></div><!-- 组件模板 -->
<template id="mychild"><div><slot :text="text"></slot></div>
</template><script>javascript">//  组件选项对象let MyChild = {template: `#mychild`,data(){return {text: "提交"}}};//  实例中注册组件const vm = new Vue({el:"#app",components: {MyChild}})</script>

在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 <template>。

也就意味着可以如下写法

<div id="app"><!-- 使用组件 --><my-child ><button slot-scope="props">{{ props.text }}</button></my-child>
</div>

显示结果

作用域插槽.png

2.2 作用域插槽也可以使用解构写法

<div id="app"><!-- 使用组件 --><my-child ><button slot-scope="{text}">{{ text }}</button></my-child>
</div>

很遗憾的告诉你, 具名插槽和作用域插槽的用法在未来即将被废弃?

What? 那么我们怎么处理具名插槽和作用域插槽取消后留下的问题呢? 不用担心,往下看.

3. v-slot指令

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

3.1 使用v-slot处理具名插槽的问题

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

<div id="app"><!-- 使用组件 --><my-child ><template v-slot:title><h2>这是一篇介绍vue插槽的文章</h2></template><p>这是文章的第一段</p><p>这是文章的第二段内容</p><p>这是文章的第三段内容</p><template v-slot:time><span>2020年5月1日</span></template></my-child></div><!-- 组件模板 -->
<template id="mychild"><div class="article"><div class="title"><slot name="title">这里是标题内容的插槽</slot></div><div class="contont"><slot>这里是默认插槽</slot></div><div class="time"><slot name="time">这里是时间的插槽</slot></div></div>
</template><script>javascript">//  组件选项对象let MyChild = {template: `#mychild`};//  实例中注册组件const vm = new Vue({el:"#app",components: {MyChild}})
</script>

显示结果:

v-slot指令处理具名插槽的功能.png

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

如果你希望更明确一些，仍然可以在一个 <template> 中包裹默认插槽的内容：

<div id="app"><!-- 使用组件 --><my-child ><template v-slot:title><h2>这是一篇介绍vue插槽的文章</h2></template><template v-slot:default><p>这是文章的第一段</p><p>这是文章的第二段内容</p><p>这是文章的第三段内容</p></template><template v-slot:time><span>2020年5月1日</span></template></my-child></div>

注意 v-slot 只能添加在上

3.2 使用v-slot处理作用域插槽的问题

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

<div id="app"><!-- 使用组件 --><my-child ><template v-slot:default="props"><button>{{ props.text }}</button></template></my-child>
</div><!-- 组件模板 -->
<template id="mychild"><div><slot :text="text"></slot></div>
</template><script>javascript">//  组件选项对象let MyChild = {template: `#mychild`,data(){return {text: "提交"}}};//  实例中注册组件const vm = new Vue({el:"#app",components: {MyChild}})</script>

显示结果

v-slot处理作用域插槽功能.png

3.3 作用域插槽的特殊处理

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

<div id="app"><!-- 使用组件 --><my-child v-slot:default="props"><button>{{ props.text }}</button></my-child>
</div>

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：

<div id="app"><!-- 使用组件 --><my-child v-slot="props"><button>{{ props.text }}</button></my-child>
</div>

这用这种简单语法的情况就是在组件中只有一个默认插槽,一但有多个插槽,请使用完整的语法

4. 动态插槽

2.6.0 新增

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

还是以我们刚才文章的那个多插槽为例;

<div id="app"><!-- 使用组件 --><my-child ><template v-slot:[head]><h2>这是一篇介绍vue插槽的文章</h2></template><p>这是文章的第一段</p><p>这是文章的第二段内容</p><p>这是文章的第三段内容</p><template v-slot:[food]><span>2020年5月1日</span></template></my-child></div><!-- 组件模板 -->
<template id="mychild"><div class="article"><div class="title"><slot name="title">这里是标题内容的插槽</slot></div><div class="contont"><slot>这里是默认插槽</slot></div><div class="time"><slot name="time">这里是时间的插槽</slot></div></div>
</template><script>javascript">//  组件选项对象let MyChild = {template: `#mychild`};//  实例中注册组件const vm = new Vue({el:"#app",data:{head:"title",food:"time"},components: {MyChild}})
</script>

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

5. 具名插槽的缩写

2.6.0 新增

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

<div id="app"><!-- 使用组件 --><my-child ><template #title><h2>这是一篇介绍vue插槽的文章</h2></template><p>这是文章的第一段</p><p>这是文章的第二段内容</p><p>这是文章的第三段内容</p><template #time><span>2020年5月1日</span></template></my-child></div>

然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：

<my-child ><!-- 这种写法无效 --><template #="props"><h2>这是一篇介绍vue插槽的文章</h2></template>
</my-child>

如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：

<my-child ><!-- 这种写法有效,因为有指令参数 --><template #deatule="props"><h2>这是一篇介绍vue插槽的文章</h2></template>
</my-child>