第二十四节:Vue插槽:Vue具名插槽/作用域插槽/v-slot

1. 具名插槽

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

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

需求如下:

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

示例代码如下:

<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>
    //  组件选项对象
    let MyChild = {
        template: `#mychild`
    };

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            MyChild
        }
    })

</script>

结果:

image

示例结果说明:

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

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

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>

    //  组件选项对象
    let MyChild = {
        template: `#mychild`
    };

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            MyChild
        }
    })
</script>

结果:

image

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

通过上面的例子我们就知道了,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>
    //  组件选项对象
    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>

显示结果

image

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>

    //  组件选项对象
    let MyChild = {
        template: `#mychild`
    };

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            MyChild
        }
    })
</script>

显示结果:

image

现在 <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 只能添加在 <template> 上

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>
    //  组件选项对象
    let MyChild = {
        template: `#mychild`,
        data(){
            return {
                text: "提交"
            }
        }
    };

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            MyChild
        }
    })

</script>

显示结果

image

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>

    //  组件选项对象
    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>