Vue 插槽（v-slot）

前言

从 v2.6.0 版本开始，插槽的 slot、slot-scope 命令已经废弃，采用 v-slot 命令来替代前两个命令，详情请见官网：https://cn.vuejs.org/v2/guide/components-slots.html#插槽内容

具名插槽

<child-cpn>
  <div slot="left">这是左</div>
  <div>这是中间</div>
  <div slot="right">这是右</div>
</child-cpn>

对应：

<child-cpn>
  <template v-slot:left>这是左</template>
  <div>这是中间</div>
  <template v-slot:right>这是右</template>
</child-cpn>

注意：v-slot 只能添加在 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同。

作用域插槽

childCpn 组件定义如下：

// names: ['张三', '李四', '王五']
<template>
	<div class="child">
		<slot :names="names"></slot>
	</div>
</template>

原 slot-scope 命令的使用：

<child-cpn>
  <div slot-scope="slotProps">
    {{slotProps.names.join('，')}}
  </div>
</child-cpn>

对应（若没有设置插槽的 name 属性，则 name 属性的默认值为 default）：

<child-cpn>
  <template v-slot:default="slotProps">
		{{slotProps.names.join('，')}}
  </template>
</child-cpn>

在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

<child-cpn v-slot:default="slotProps">
  {{slotProps.names.join('，')}}
</child-cpn>

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：

<child-cpn v-slot="slotProps">
  {{slotProps.names.join('，')}}
</child-cpn>

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：

// wrong syntax
<child-cpn v-slot="slotProps">
  {{slotProps.names.join('，')}}
  <template v-slot:other="otherProps">
		// some content here.
  </template>
</child-cpn>

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：

// correct syntax
<child-cpn>
  <template v-slot:default="slotProps">
		{{slotProps.names.join('，')}}
  </template>
  <template v-slot:other="otherProps">
		// some content here.
  </template>
</child-cpn>

具名插槽的缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。前面具名插槽中的例子：

<child-cpn>
  <template v-slot:left>这是左</template>
  <div>这是中间</div>
  <template v-slot:right>这是右</template>
</child-cpn>

缩写：

<child-cpn>
  <template #left>这是左</template>
  <div>这是中间</div>
  <template #right>这是右</template>
</child-cpn>