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>