v.2.6.0中引入了一个新的缩写指令v-slot。详情见RFC-0001 和 RFC-0002。
为了理解新的指令，我们呢先来看一下原来版本中的scoped slots。
假设你又一个 List组件，并且有个filtered list当作它的scope，代码如下：
<template>
<List :items="items">
<template slot-scope="{ filteredItems }">
<p v-for="item in filteredItems" :key="item">{{ item }}</p>
</template>
</List>
</template>
这样你可能感受不太明显，你可以在 Codesandbox 中尝试这个例子。
使用 v-slot指令，你可以直接把scope的数据写在组件的标签上，减少了一层 <template>：
<template>
<List v-slot="{ filteredItems }" :items="items">
<p v-for="item in filteredItems" :key="item">{{ item }}</p>
</List>
</template>
注意：v-slot只能用于组件名称的和<template>上，但是不可以用在普通的html的元素标签上。
这种写法会让代码可读性提高很多，尤其是有嵌套的scoped slots时，scope的追根溯源是很困难的一个事情。
v-slot指令也介绍了一个合并v-slot和scoped-slots 的方法，中间通过:分割。
看下面这个例子，如果使用scoped-slot
<template>
<Promised :promise="usersPromise">
<p slot="pending">Loading...</p>
<ul slot-scope="users">
<li v-for="user in users">{{ user.name }}</li>
</ul>
<p slot="rejected" slot-scope="error">Error: {{ error.message }}</p>
</Promised>
</template>
也可以用v-slot:
<template>
<Promised :promise="usersPromise">
<template v-slot:pending>
<p>Loading...</p>
</template>
<template v-slot="users">
<ul>
<li v-for="user in users">{{ user.name }}</li>
</ul>
</template>
<template v-slot:rejected="error">
<p>Error: {{ error.message }}</p>
</template>
</Promised>
</template>
最后，v-slot可以简写成#，上面的可以写成下面这样：
<template>
<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>
</template>
注意： 默认的 v-slot 缩写是 #default。
Are you excited about this new slot syntax?
Remember you can read this tip online (with copy/pasteable code), and don’t forget to share VueDose with your colleagues, so they also know about these tips as well!
See you next week.
Alex
