第二十四节:Vue插槽: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>
    //  组件选项对象
    let MyChild = {
        template: `#mychild`
    };

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

</script>

结果:

image

示例结果说明:

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

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

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>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,214评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,307评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,543评论 0赞 341
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,221评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,224评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,007评论 1赞 284
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,313评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,956评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,441评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,925评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,018评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,685评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,234评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,240评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,464评论 1赞 261
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,467评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,762评论 2赞 345

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

1. 具名插槽

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

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

2. 作用域插槽

2.1 作用插槽的理解和使用

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

3. v-slot指令

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

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

3.3 作用域插槽的特殊处理

4. 动态插槽

5. 具名插槽的缩写

推荐阅读更多精彩内容