vue 2.6 中 slot 的新用法

genedna 发布于2019-08-23 18:34 / 1626人阅读

摘要：最近发布不久的，使用插槽的语法变得更加简洁。插槽可用包裹外部的标签或者组件，并允许其他或组件放在具名插槽对应名称的插槽上。在部分中，监听的变化，当发生变化时，清除状态，然后调用并，当成功完成或失败时更新状态。

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

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

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

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

插槽是什么？

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

// frame.vue

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

// app.vue

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

多个/命名的插槽

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

// titled-frame.vue

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

// app.vue

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

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

作用域插槽

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

// current-user.vue

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

// app.vue

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

这里有几点需要注意：

我们指定了default的名称，但是不需要为默认槽指定名称。相反，我们可以使用v-slot="slotProps"。

不需要使用slotProps作为名称，可以随便叫它什么。

如果只使用默认槽，可以跳过内部template标记，直接将v-slot指令放到当前current-user上。

可以使用对象解构来创建对作用域插槽数据的直接引用，而不是使用单个变量名。换句话说，可以使用v-slot="{user}"代替v-slot="slotProps"，然后可以直接使用user而不是slotProps.user。

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

// app.vue

还有几点要记住：

可以使用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，因此我们应该使用一个插槽。

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

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

现在，使用它：

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

复用函数

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

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

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

无渲染组件

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

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

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

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

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

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

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

...

我们将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。

交流

干货系列文章汇总如下，觉得不错点个Star，欢迎加群互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」作者，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，即可看到福利，你懂的。

云服务器 GPU云服务器数据挖掘中的新方法 vue中 vue 中使用 webrtc 中vector用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105445.html

vue 2.6 插槽更新 v-slot 用法总结

摘要：在中，我们为具名插槽和作用域插槽引入了一个新的统一的语法即指令。它取代了和这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅。在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。新语法的由来可查阅 RFC。引vue官方文档之前...

selfimpr 2019-08-26 13:33 评论0 收藏0
详解vue组件三大核心概念

摘要：前言本文主要介绍属性事件和插槽这三个基础概念使用方法及其容易被忽略的一些重要细节。至于如何改变，我们接下去详细介绍单向数据流这个概念出现在组件通信。比如上例中在子组件中修改父组件传递过来的数组从而改变父组件的状态。的一个核心思想是数据驱动。前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们...

rickchen 2019-08-23 17:51 评论0 收藏0
vue2.0指不了南

摘要：回调函数会接收所有传入事件触发函数的额外参数。添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。零．混沌 vue是什么 vue是一套构建用户界面的渐进式框架。他的特点：简洁：页面由HTML模板+Json数据+Vue实例组成数据驱动：自动计算属性和追踪依赖的模板表达式组件化：用可复用、解耦的组件来构造页面轻量：代码量小，不依赖其他库快速：精确有...

张红新 2019-08-20 15:31 评论0 收藏0
Vue Slot用法

摘要：示例这是命名的节点该节点在逻辑代码中，可以使用来获取命名的。该节点在文件中，可以使用来承接命名的。 showImg(https://segmentfault.com/img/bVxM4v?w=797&h=250); Vue在讲组件时，建议最好不要在父作用域中传值给子组件，不知道为什么用slot； slot背景为什么要用slot？个人理解：为了保证组件内容的灵活性，组件的内容由...

liangdas 2019-08-21 10:51 评论0 收藏0
7个有用的Vue开发技巧

摘要：另外需要说明的是，这里只是冻结了的值，引用不会被冻结，当我们需要数据的时候，我们可以重新给赋值。1 状态共享随着组件的细化，就会遇到多组件状态共享的情况，Vuex当然可以解决这类问题，不过就像Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是vue.js 2.6新增加的Observable API ，通过使用这个api我们可以应对一些简单的跨组件数...

Godtoy 2019-05-23 12:19 评论0 收藏0