• 原文地址：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0002-slot-syntax-shorthand.md
• 作者：yyx990803，posva，ibrahimBeladi
• Git Commit：56ced20

以下为原文翻译

• 开始日期: 2019-01-16
• 目标主版本: (2.x / 3.x)
• 相关Issues: https://github.com/vuejs/rfcs/pull/2
• 实现PR: (leave this empty)

概述

给rfc-0001提议的v-slot增加简写语法，请先阅读该提议以理解上下文。

基本例子

<foo>
  <template #header="{ msg }">
    Message from header: {{ msg }}
  </template>

   <template #footer>
    A static footer
  </template>
</foo>

动机

简写主要用于更简洁的语法。

目前在Vue中只有连个指令缩写：v-bind和v-on：

<div v-bind:id="id"></div>
<div :id="id"></div>

<button v-on:click="onClick"></button>
<button @click="onClick"></button>

v-bind与v-on经常会多次出现在同一个元素上。不同指令之间的差异主要在于其携带的参数，而重复的指令部分会让代码变得十分冗长。简写可以帮助我们降低重复的（v-xxx）而使参数部分更明显。

在组件有多个插槽时，新的v-slot语法也可能使代码变得冗长：

<TestComponent>
  <template v-slot:one="{ name }">Hello {{ name }}</template>
  <template v-slot:two="{ name }">Hello {{ name }}</template>
  <template v-slot:three="{ name }">Hello {{name }}</template>
</TestComponent>

这里的v-slot重复了许多次而实际上只有参数表示的插槽名会不同。

而简写会增加插槽名的可读性。

<TestComponent>
  <template #one="{ name }">Hello {{ name }}</template>
  <template #two="{ name }">Hello {{ name }}</template>
  <template #three="{ name }">Hello {{name }}</template>
</TestComponent>

设计细节

下面的缩写与v-bind和v-on非常像：使用简写（#）替代指令名和冒号。

<!-- full syntax -->
<foo>
  <template v-slot:header="{ msg }">
    Message from header: {{ msg }}
  </template>

   <template v-slot:footer>
    A static footer
  </template>
</foo>

<!-- shorthand -->
<foo>
  <template #header="{ msg }">
    Message from header: {{ msg }}
  </template>

   <template #footer>
    A static footer
  </template>
</foo>

和v-bind与v-on类似的是，简写只适用于参数存在的场景。这代表着无参数的v-slot不能简化为#=。对于默认插槽来说，可以使用完整的v-slot语法或直接使用#default。

<foo v-slot="{ msg }">
  {{ msg }}
</foo>

<foo #default="{ msg }">
  {{ msg }}
</foo>

选择#作为简写是基于之前RFC中收集的反馈。他和CSS的id选择器有些类似，概念上也非常适合代表插槽名。

一些实际应用中使用作用域插槽的库的例子 (vue-promised)：

<Promised :promise="usersPromise">
 <template #pending>
   <p>Loading...</p>
 </template>

  <template #default="users">
   <ul>
     <li v-for="user in users">{{ user.name }}</li>
   </ul>
 </template>

  <template #rejected="error">
   <p>Error: {{ error.message }}</p>
 </template>
</Promised>

缺点

• 有些人可能认为插槽并不经常使用，所以并不真的需要简写，并且它会为初学者增加额外的学习曲线。作为回复：

  1. 我相信插槽是第三方组件的重要机制，能够使组件高度定制化与可组合化（composable）。我认为更多的组件库会依赖插槽带来的定制和组合特性。当用户使用这种组件库时，简写将会是一个非常有价值的特性。

  2. 简写的翻译规则非常直接并与现有的规则一致。如果用户了解了基本语法，简写也将十分好理解。

替代

一些替代符号在之前的RFC中已经有过讨论，只有一个&有类似的性质。

<foo>
  <template &header="{ msg }">
    Message from header: {{ msg }}
  </template>

   <template &footer>
    A static footer
  </template>
</foo>

采取策略

它应当是新语法v-slot的一个天生的扩展。最理想的情况下，我们希望基本语法和简写同时发布，这样用户就可以同时学习。而如果简写在v-slot之后发布，没有了解到简写的人在其他人的代码中看到简写则会感到困惑。

未解决问题

无

以上为原文翻译