前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 2.6 全新的slot语法

Vue 2.6 全新的slot语法

作者头像
用户1687375
发布2019-05-06 16:02:35
3.9K0
发布2019-05-06 16:02:35
举报
文章被收录于专栏:较真的前端

2019年大年三十,Vue 2.6发布,其中改动最大的就是slot(插槽),今天为大家分析一下最新版的slot。

上一篇文章中已经跟大家分享了Vue 2.6中放出大招,可以点这里回看上一篇。

今天给大家着重讲一下Vue 2.6中的Slot

回顾

Vue 2.6版本之前,slot是基于W3C提出的Web Component草案设计实现的。

草案地址:https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md

所以之前版本的slot语法与W3C标准中还是很接近的。利用<slot>元素来作为承载分发内容的出口。而在vue 2.6+的版本中,将使用一个全新的指令——v-slot来替代原来的<slot>。先看一下写法的比较

默认插槽、具名插槽的对比

2.5.+和2.6.+在组件定义上的语法是相同的,定义示例如下:

代码语言:javascript
复制
<!--组件的定义-->
<div class="container">
  <header>
    <!--具名插槽 名称header-->
    <slot name="header"></slot>
  </header>
  <main>
    <!--默认插槽-->
    <slot></slot>
  </main>
  <footer>
    <!--具名插槽 名称footer-->
    <slot name="footer"></slot>
  </footer>
</div>

而在使用组件的插槽时是有区别的

2.5.+语法

代码语言:javascript
复制
<!--组件的使用-->
<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>

2.6.+语法

使用一个全新的指令——v-slot

代码语言:javascript
复制
<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的优势还未体现出来。下面对比一下“作用域插槽”。

作用域插槽的对比

作用域插槽组件的定义示例如下:

代码语言:javascript
复制
<ul>
  <li
    v-for="todo in todos"
    v-bind:key="todo.id"
  >
    <!-- 我们为每个 todo 准备了一个插槽,-->
    <!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
    <slot v-bind:todo="todo">
      <!-- 回退的内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

v2.5.+的slot使用

代码语言:javascript
复制
<todo-list v-bind:todos="todos">
  <template slot-scope="slotProps">
    <span v-if="slotProps.todo.isComplete">✓</span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>

v2.6.+的slot使用

代码语言:javascript
复制
<todo-list :todos="todos">
  <template v-slot:default="{todo}">
    <span v-if="todo.isComplete">✓</span>
    {{todo.text }}
  </template>
</todo-list>

可以看出,即使是作用域插槽中,v-slot的指令同样可以搞定。接下来仔细说说这个全新的v-slot指令

全新的v-slot指令

  • 他可以使用在<template>插槽容器中,以便将插槽传递给组件。
  • 如果插槽是接受属性的作用域插槽,则可以利用指令声明的属性值来接收。v-slot和slot-scope的工作原理是相同的,所以也支持解构赋值。

新老对比

  • 依然为大多数的插槽使用方法(单个默认插槽)提供简洁的语法:
代码语言:javascript
复制
<foo v-slot="{ msg }">{{ msg }}</foo>
  • 作用域的值与当前组件有更清晰的链接

可以看下面的例子,有更加直观的对比

老语法

代码语言:javascript
复制
<foo>
 <bar slot-scope="foo">
   <baz slot-scope="bar">
     <div slot-scope="baz">
       {{ foo }} {{ bar }} {{ baz }}
     </div>
   </baz>
 </bar>
</foo>

新语法:

代码语言:javascript
复制
<foo v-slot="foo">
 <bar v-slot="bar">
   <baz v-slot="baz">
     {{ foo }} {{ bar }} {{ baz }}
   </baz>
 </bar>
</foo>

更多变化

动态插槽名称

由于V2.6.+开始,vue支持动态参数,所以在v-slot中同样可以将插槽名动态化。

代码语言:javascript
复制
<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

具名插槽的缩写

v-onv-bind 一样,v-slot 也有缩写,即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

代码语言:javascript
复制
<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>

总结

Vue 2.6提出了全新的v-slot指令来解决之前在插槽使用中的痛点。但是他是完全向下兼容的,所以各位不用担心升级了Vue 2.6以后之前的代码废掉,毕竟仍然在2.X版中。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-03-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 较真的前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档