详解Vue的slot新用法

摘要： 理解Vue插槽。

Fundebug经授权转载，版权归原作者所有。

为了保证的可读性，本文采用意译而非直译。

最近发布不久的Vue 2.6，使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于Vue的项目提供可重用性，新功能和更清晰的可读性。 真正有能力的插槽是什么？

如果你是Vue的新手，或者还没有看到2.6版的变化，请继续阅读。也许学习插槽的最佳资源是Vue自己的文档，但是我将在这里给出一个纲要。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

插槽是什么？

插槽是Vue组件的一种机制，它允许你以一种不同于严格的父子关系的方式组合组件。插槽为你提供了一个将内容放置到新位置或使组件更通用的出口。从一个简单的例子开始：

// frame.vue
<template>
  <div class="frame">
    <slot></slot>
  </div>
</template>

这个组件最外层是一个div。假设div的存在是为了围绕其内容创建一个样式框架。这个组件可以通用地用于将框架包围在wq你想要的任何内容上，来看看它是怎么用的。这里的frame组件指的是我们刚才做的组件。

// app.vue
<template>
  <frame><img src="an-image.jpg"></frame>
</template>

在开始和结束frame标记之间的内容将插入到插槽所在的frame组件中，替换slot标记。这是最基本的方法。还可以简单地通过填充指定要放入槽中的默认内容

// frame.vue
<template>
  <div class="frame">
    <slot>如果这里没有指定任何内容，这就是默认内容</slot>
  </div>
</template>

所以现在如果我们这样使用它：

// app.vue
<template>
  <frame />
</template>

“如果这里没有指定任何内容，这就是默认内容”是默认内容，但是如果像以前那样使用它，默认文本将被img标记覆盖。

多个/命名的插槽

可以向组件添加多个插槽，但是如果这样做了，那么除了其中一个之外，其他所有插槽都需要有名称。如果有一个没有名称的槽，它就是默认槽。下面是如何创建多个插槽：

// titled-frame.vue
<template>
  <div class="frame">
    <header><h2>
      <slot name="header">Title</slot>
    </h2></header>
    <slot>如果这里没有指定任何内容，这就是默认内容</slot>
  </div>
</template>

我们保留了相同的默认槽，但这次我们添加了一个名为header的槽，可以在其中输入标题，用法如下：

// app.vue
<template>
  <titled-frame>
    <template v-slot:header>
      <!-- The code below goes into the header slot -->
      My Image’s Title
    </template>
    <!-- The code below goes into the default slot -->
    <img src="an-image.jpg">
  </titled-frame>
</template>

就像之前一样，如果我们想将内容添加到默认槽中，只需将其直接放在titled-frame组件中。但是，要将内容添加到命名槽中，我们需要用v-slot指令将代码包裹在在template标记中。在v-slot之后添加冒号(:)，然后写出要传递内容的slot的名称。

注意，v-slot是Vue 2.6的新版本，所以如果你使用的是旧版本，则需要阅读关于不推荐的slot语法的文档。

作用域插槽

还需要知道的另一件事是插槽可以将数据/函数传递给他们的孩子。 为了证明这一点，我们需要一个完全不同的带有插槽的示例组件：创建一个组件，该组件将当前用户的数据提供给其插槽：

// current-user.vue
<template>
  <span>
    <slot v-bind:user="user">
      {{ user.lastName }}
    </slot>
  </span>
</template>

<script>
export default {
  data () {
    return {
      user: ...
    }
  }
}
</script>

该组件有一个名为user的属性，其中包含关于用户的详细信息。默认情况下，组件显示用户的姓，但请注意，它使用v-bind将用户数据绑定到slot。这样，我们就可以使用这个组件向它的后代提供用户数据

// app.vue
<template>
  <current-user>
    <template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>    
  </current-user>
</template>

为了访问传递给slot的数据，我们使用v-slot指令的值指定作用域变量的名称。

这里有几点需要注意：

  • 我们指定了default的名称，但是不需要为默认槽指定名称。相反，我们可以使用v-slot="slotProps"。
  • 不需要使用slotProps作为名称，可以随便叫它什么。
  • 如果只使用默认槽，可以跳过内部template标记，直接将v-slot指令放到当前current-user上。
  • 可以使用对象解构来创建对作用域插槽数据的直接引用，而不是使用单个变量名。换句话说，可以使用v-slot="{user}"代替v-slot="slotProps"，然后可以直接使用user而不是slotProps.user。

所以，上面的例子可以这样重写

// app.vue
<template>
  <current-user v-slot="{user}">
    {{ user.firstName }}
  </current-user>
</template>

还有几点要记住：

  • 可以使用v-bind指令绑定多个值。
  • 也可以将函数传递到作用域槽。许多库使用它来提供可重用的函数组件。
  • v-slot 的别名是#。因此，可以用#header="data" 来代替 v-slot:header="data"。还可以使用 #header来代替 v-slot:header(前提:不是作用域插槽时)。对于默认插槽，在使用别名时需要指定默认名称。换句话说，需要这样写 #default="data" 而不是#="data"。

可以从文档中了解更多的细节，但这足以帮助你理解在本文剩下部分中讨论的内容。

你能用插槽做什么？

插槽不是为了一个目的而构建的，或者至少如果它们是，它们已经超越了最初的意图，成为做许多不同事物的强大工具。

可重用的模式

组件总是被设计为可重用的，但是某些模式对于使用单个“普通”组件来实施是不切实际的，因为为了自定义它，需要的props 数量可能过多或者需要通过props传递大部分内容或其它组件。

插槽可用包裹外部的HTML标签或者组件，并允许其他HTML或组件放在具名插槽对应名称的插槽上。

对于的第一个例子，从简单的东西开始:一个按钮。假设咱们的团队正在使用 Bootstrap。使用Bootstrap，按钮通常与基本的“btn”类和指定颜色的类绑定在一起，比如“btn-primary”。你还可以添加size类，比如'btn-lg'。

为了简单起见，现在让我们假设你的应用使用btn、btn-primary和btn-lg。你不希望总是必须在按钮上写下这三个类，或者你不相信新手会记得写下这三个类。

在这种情况下，可以创建一个自动包含所有这三个类的组件，但是如何允许自定义内容？ prop 不实用，因为允许按钮包含各种HTML，因此我们应该使用一个插槽。

<!-- my-button.vue -->
<template>
  <button class="btn btn-primary btn-lg">
    <slot>Click Me!</slot>
  </button>
</template>

现在我们可以在任何地方使用它，无论你想要什么内容

<!-- 使用 my-button.vue -->
<template>
  <my-button>
    <img src="/img/awesome-icon.jpg"> 我是小智！
  </my-button>
</template>

当然，你可以选择比按钮更大的东西。 坚持使用Bootstrap，让我们看一个模态：

<!-- my-modal.vue -->
<template>
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <slot name="header"></slot>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <slot name="body"></slot>
      </div>
      <div class="modal-footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</div>
</template>

现在，使用它：

<!-- 使用 my-modal.vue -->
<template>
  <my-modal>
    <template #header>
      <h5>大家最棒!</h5>
    </template>
    <template #body>
      <p>大家加油</p>
    </template>
    <template #footer>
      <em>大家好样的!</em>
    </template>
  </my-modal>
</template>

上述类型的插槽用例显然非常有用，但它可以做得更多。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

复用函数

Vue组件并不完全是关于HTML和CSS的。它们是用JavaScript构建的，所以也是关于函数的。插槽对于一次性创建函数并在多个地方使用功能非常有用。让我们回到模态示例并添加一个关闭模态的函数

<!-- my-modal.vue -->
<template>
<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <slot name="header"></slot>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <slot name="body"></slot>
      </div>
      <div class="modal-footer">        
        <slot name="footer" :closeModal="closeModal"></slot>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  //...
  methods: {
    closeModal () {
      // 关闭对话框时，需要做的事情
    }
  }
}
</script>

当使用此组件时，可以向footer添加一个可以关闭模态的按钮。 通常，在Bootstrap模式的情况下，可以将data-dismiss =“modal”添加到按钮来进行关闭。

但我们希望隐藏Bootstrap 特定的东西。 所以我们传递给他们一个他们可以调用的函数，这样使用者就不会知道我们有使用 Bootstrap 的东西。

<!-- 使用 my-modal.vue -->
<template>
  <my-modal>
    <template #header>
      <h5>Awesome Interruption!</h5>
    </template>
    <template #body>
      <p>大家加油！</p>
    </template>
    <template #footer="{closeModal}">
      <button @click="closeModal">
        点我可以关闭烦人的对话框
      </button>
    </template>
  </my-modal>
</template>

无渲染组件

最后，可以利用你所知道的关于使用插槽来传递可重用函数的知识，并剥离所有HTML，只使用插槽。这就是无渲染组件的本质:一个只提供函数而不包含任何HTML的组件。

使组件真正无渲染可能有点棘手，因为需要编写render函数而不是使用模板来消除对根元素的依赖，但它可能并不总是必要的。 来看看一个先使用模板的简单示例：

<template>
  <transition name="fade" v-bind="$attrs" v-on="$listeners">
    <slot></slot>
  </transition>
</template>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

这是一个无渲染组件的奇怪例子，因为它甚至没有任何JavaScript。这主要是因为我们正在创建一个内置无渲染函数的预配置可重用版本:transition。

是的，Vue有内置的无渲染组件。这个特殊的例子取自Cristi Jora的一篇关于可重用transition的文章，展示了一种创建无渲染组件的简单方法，该组件可以标准化整个应用程序中使用的 transition。

对于我们的另一个示例，我们将创建一个组件来处理切换 Promise 的不同状态中显示的内容: pending、resolved 和 failed。这是一种常见的模式，虽然它不需要很多代码，但是如果没有为了可重用性而提取逻辑，它会使很多组件变得混乱。

<!-- promised.vue -->
<template>
  <span>
    <slot  name="rejected"  v-if="error" :error="error"></slot>
    <slot  name="resolved"  v-else-if="resolved" :data="data"></slot>
    <slot  name="pending"  v-else></slot>
  </span>
</template>

<script>
export  default {
  props: {
    promise:  Promise
  },

  data: () => ({
    resolved:  false,
    data:  null,
    error:  null
  }),  

  watch: {
    promise: {
      handler (promise) {
        this.resolved  =  false
        this.error  =  null

        if (!promise) {
          this.data  =  null
          return
        }

        promise.then(data  => {
          this.data  =  data
          this.resolved  =  true
        })
        .catch(err  => {
          this.error  =  err
          this.resolved  =  true
        })
      },
      immediate:  true
    }
  }
}
</script>

这是怎么回事,小老弟?首先，请注意，该组件接收一个Promise 类型参数。在watch部分中，监听promise的变化，当promise发生变化时，清除状态，然后调用 then 并 catch promise，当 promise 成功完成或失败时更新状态。

然后，在模板中，我们根据状态显示一个不同的槽。请注意，我们没有保持它真正的无渲染，因为我们需要一个根元素来使用模板。我们还将data和error传递到相关的插槽范围。

<template>
  <div>
    <promised :promise="somePromise">
      <template #resolved="{ data }">
        Resolved: {{ data }}
      </template>
      <template #rejected="{ error }">
        Rejected: {{ error }}
      </template>
      <template #pending>
          请求中...
      </template>
    </promised>
  </div>
</template>
...

我们将somePromise传递给无渲染组件。 然后等待它完成，对于 pending 的插槽，显示“请求中...”。 如果成功，显示“Resolved：对应的值”。 如果失败，显示“已Rejected：失败的原因”。 现在我们不再需要跟踪此组件中的promise的状态，因为该部分被拉出到它自己的可重用组件中。

那么，我们可以做些什么来绕过promised.vue中的插槽？ 要删除它，我们需要删除template部分并向我们的组件添加render函数：

render () {
  if (this.error) {
    return this.$scopedSlots['rejected']({error: this.error})
  }

  if (this.resolved) {
    return this.$scopedSlots['resolved']({data: this.data})
  }

  return this.$scopedSlots['pending']()
}

这里没有什么太复杂的。我们只是使用一些if块来查找状态，然后返回正确的作用域slot(通过this.$ scopedslot ['SLOTNAME'](…))，并将相关数据传递到slot作用域。当你不使用模板时，可以跳过使用.vue文件扩展名，方法是将JavaScript从script标记中提取出来，然后将其放入.js文件中。在编译这些Vue文件时，这应该会给你带来非常小的性能提升。

总结

Vue的插槽将基于组件的开发提升到了一个全新的水平，虽然本文已经展示了许多可以使用插槽的好方法，但还有更多的插槽。欢迎留言讨论。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了10亿+错误事件，付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用！

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

推荐阅读更多精彩内容

  • 第七章：vue.js组件详解Ⅰ（基础篇）
    组件（Component）是Vue.js最核心的功能，也是整个架构设计最精彩的地方，当然也是最难掌握的。...
    六个周阅读 5,582评论 0赞 32
  • Vue 组件
    此文基于官方文档，里面部分例子有改动，加上了一些自己的理解 什么是组件？ 组件（Component）是 Vue.j...
    陆志均阅读 3,805评论 5赞 14
  • Vue的特性精华
    以下内容是我在学习和研究Vue时，对Vue的特性、重点和注意事项的提取、精练和总结，可以做为Vue特性的字典； 1...
    科研者阅读 14,048评论 3赞 24
  • Vue初探--组件化篇
    什么是组件？ 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装...
    youins阅读 9,451评论 0赞 13
  • Vue 插槽 & 高复用组件
    【2019-3-4更新】Vue 2.6+修改了部分语法，对插槽的使用有了较多的更新。在本文中笔者在相应位置给出了更...
    果汁凉茶丶阅读 10,225评论 2赞 36