Vue 3.0 & Vue 2.6+ 你需要知道的 v-slot

Vue.js 你需要知道的 v-slot （译）

面试官：谈谈 v-slot 的作用？

自己先想一分钟。

image.png

这篇文章假设你对组件的基础知识有定义的了解，如果你对此还不熟悉，请先阅读。

从 vue@2.6.x 开始，Vue 为具名和范围插槽引入了一个全新的语法，即我们今天要讲的主角：v-slot 指令。目的就是想统一 slot 和 scope-slot 语法，使代码更加规范和清晰。既然有新的语法上位，很明显，slot 和 scope-slot 也将会在 vue@3.0.x 中彻底的跟我们说拜拜了。而从 vue@2.6.0 开始，官方推荐我们使用 v-slot 来替代后两者。

我们来一点一点说起吧。文笔有限，不对之处请留言斧正！

具名插槽

在 2.6.0+ 中已弃用

先前，我们使用具名插槽来自定义模板内容，例如，一个假设的 <base-layout> 组件的模板如下：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

在向具名插槽提供内容的时候，我们可以在一个父组件的 <template> 元素上使用 slot 特性：

<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

或者直接用在一个普通的元素上：

<base-layout>
  <h1 slot="header">Here might be a page title</h1>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <p slot="footer">Here's some contact info</p>
</base-layout>

上述两个示例渲染出来的 HTML 都将会是：

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

我们可以使用 v-slot 指令改写上面的栗子：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

就是这么简单，插槽的名字现在通过 v-slot:slotName 这种形式来使用。

Tips: 没有名字的 <slot> 隐含有一个 "default" 名称

例如，上面的默认插槽，如果你想显示调用的话，可以这样：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

无论哪种方式，上面的代码都将输出为下面代码：

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>
!!!请注意， v-slot 只能添加到 <template> 或自定义组件上，这点与弃用的 slot 属性不同

作用域插槽

在 2.6.0+ 中已弃用

有时候，我们想在父组件中访问子组件内部的一些可用数据。例如，假设有一个下面模板的 <current-user> 组件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>

我们可能想用用户的名字来替换掉插槽里面的姓，于是我们这样写：

<current-user>
  {{ user.firstName }}
</current-user>

很不幸，上面这段代码不能如你预期那样工作，因为当前代码的作用域环境是在父组件中，所以它访问不了 <current-user> 内部的数据。

为了解决这个， 我们可以在 <current-user> 内部的 <slot> 元素上动态绑定一个 user 对象属性：

<span>
  <!-- 完整 v-bind:user 下面是简写形式 -->
  <slot :user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定到 <slot> 元素上的属性我们称之为 slot props。现在，在父作用域中，我们可以通过 slot-scope 来访问 user 数据了：

<current-user>
  <template slot-scope="slotProp">
    {{ slotProp.user.firstName }}
  </template>
</current-user>

同样的，我们使用 v-slot 重构上面的代码：

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

或者直接作用在 <current-user> 上的写法：

<!-- 省略默认插槽名字 -->
<current-user v-slot="slotProp">
  {{ slotProp.user.firstName }}
</current-user>

<!-- 显示调用默认插槽名字 -->
<current-user v-slot:default="slotProp">
  {{ slotProp.user.firstName }}
</current-user>

在这个栗子中，我们选择 slotProp 作为我们的 slot props 名字，但你可以使用你喜欢的任何名字。

单个默认插槽的缩写形式

在上述情况下，当且仅当提供了默认插槽内容时，我们可以使用 v-slot 直接作用在组件上：

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

我们可以简化上面的的默认插槽写法：

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

请注意了，默认插槽的缩写语法不能与具名插槽混用：

<!-- 控制台将报警告：-->
<!-- To avoid scope ambiguity, the default slot should also use <template> syntax when there are other named slots. -->
<!-- 意思就是说，为了避免作用域模糊 -->
<!-- 当有其他具名插槽时，默认插槽也应当使用 '<template>' 模板语法 -->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</current-user>

于是，上面的代码，我们改写成：

<current-user>
 <!-- 两种写法均可 -->
  <!--<template v-slot="slotProps">
    {{ slotProps.user.firstName }}
  </template>-->
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>

插槽内容的解构赋值

在 Vue 代码内部，我们传递的 slotProps 其实就是函数的一个单一参数：

function (slotProps) {
  // ... slot content ...
}

这也就意味着 v-slot 的值只要满足函数参数定义的 JavaScript 表达式的都可以接受。因此，在支持的环境（单文件或现代浏览器）中，你还可以使用 ES2015 解构语法来提取特定的插值内容，例如：

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

代码看起来更简洁对吧。我们还可以重命名解构变量：

<current-user v-slot="{ user: person }">>
  {{ person.firstName }}
</current-user>

这给了我们很多自由操作的空间，你甚至可以自定义回退内容，以便在未定义插值情况下使用：

<current-user v-slot="{ user = { firstName: 'Guest' } }">>
  {{ user.firstName }}
</current-user>

动态插槽名称

2.6.0+ 新增

动态指令参数 也适用于 v-slot ，允许我们定义动态插槽名称：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

命名插槽简写

2.6.0+ 新增

与 v-on 和 v-bind 类似，v-slot 也有一个简写，即使用 # 代替 v-slot。例如， v-slot:header 简写成 #header:

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

和其他指令一样，只有在提供参数时才能使用简写形式，下面的写法是无效的：

<!-- 将会触发一个控制台警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

也就是说，如果你想使用简写语法，则务必指定插值的名字：

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

参考

结语

看了那么多 相信也有同学和我一样有点晕...(应该只有我有点晕)
我们先要捋清楚思路2个概念
1.父组件要插入子组件的具名插槽(slot)
2.父组件需要用到子组件的数据 (怎么玩看你)
我们先来看第一个

1
//父组件
<child>
  <template v-slot:header> 我是父组件插入子组件了</template>
  👇👇👇也可以简写
  <template #header> 我是父组件插入子组件了</template>
</child>
//子组件
<template>
  <div>
  <slot name ="header">我是子组件原来的数据</slot>
  </div>
</template>

以上的代码是父组件插入子组件的插槽

2
//父组件
<child v-slot="slotProp">
  <template v-slot:header> {{slotProp.name}}</template>
</child>
//子组件
<template>
  <div>
  <slot name ="header" :slotProp="{name: '我是传出去的数据'}">我是子组件原来的数据</slot>
  </div>
</template>

这样我们就是把"我是传出去的数据"插入到了子组件的数据

注意区别对待v-slot="" 和v-slot:name

=和:的区别 一个是slot的name 一个是父组件获取子组件的数据

以下还有个代码片段仅供参考
代码片段

项目使用element-Ui的 请不要升级2.6+ 详情见图片


注意事项.png

文章转自掘金gongph

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念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