組件插槽使用詳解

電腦的 usb 口，大家都非常熟悉，保留的 usb 口可以插入鼠標、鍵盤、U盤、音響、耳機等等，一個插口可以添加多個設備。我們的插槽也是這樣，預留一個位置，我們使用的時候可以放入自己需要的內容。

一、插槽的作用

• 插槽的目的是讓原來的設備有更多的擴展性。
• 組件最大的特點就是復用性，插槽能大大提高組件的復用性。
• 使用者可以決定組件內部的內容。

二、插槽的基本使用

插槽基本使用就是：抽取共性，保留不同。使用者提供插槽內容。

方式1：基本使用

<div id="app">
 <!-- 調用組件 --> 
 <cld>插槽內容</cld>
</div>

<!-- 組件內容 --> 
<template id="child">
 <div>
  子組件內容
  <slot></slot>  
 </div>
</template>

 

方式2：添加默認值

給插槽內添加默認值，使用組件時，插槽沒有填入內容就會展示默認內容，如果使用組件時傳入插槽內容，就會展示對應的內容。

<div id="app">
 <!-- 調用組件 --> 
 <cld></cld>
</div>

<!-- 組件內容 --> 
<template id="child">
 <div>
  子組件內容
  <slot>默認內容</slot>  
 </div>
</template>

 

此時頁面展示 默認內容。

<div id="app">
 <!-- 調用組件 --> 
 <cld>傳入插槽內容</cld>
</div>

<!-- 組件內容 --> 
<template id="child">
 <div>
  子組件內容
  <slot>默認內容</slot>  
 </div>
</template>

 

此時頁面展示 傳入插槽內容。

方式3：具名插槽

具名插槽就是有具體名字的插槽，基本用法為：

• slot 插槽必須綁定 name 屬性。
• 使用組件時，插槽內容需要添加slot屬性。
• 通過slot屬性來指定，這個slot的值必須和下面的slot組件的name值對應上，如果沒有匹配到，則放到匿名的插槽中。

<!-- 組件調用 -->
<div id="app">
 <cld>
  沒有插槽內容 
  <h2 slot="title">標題</h2> 
 </cld>
</div>

<!-- 子組件內容 -->
  <template id="child">
 <div>
  <slot name="title"></slot> 
  子組件內容
  <slot>默認內容</slot>  
 </div>
</template>

 

三、作用域插槽

我們經常通過父組件給子組件傳遞展示內容，但是作用域插槽剛好相反，是父組件替換插槽的標簽，但是內容由子組件來提供。

slot-scope 獲取插槽作用域，其實就是把組件內的數據帶出來。

<!-- 子組件使用  -->
<cld >
 <template slot="title" slot-scope="scope">
  <div  >
   獲取數據
   <li v-for="item in scope.data">{{item}}</li>
  </div>
 </template> 
</cld>

<!-- 子組件內容 -->
<template id="child" >
 <div>
  <slot name="title" :data="color"></slot> 
 </div>
</template>
<script>
export default{
 data(){
  return{
    color:['red','oranage','yellow','green']
   }
  }
}
</script>

 

作用：主要用於提供的組件帶有一個可從子組件獲取數據的可復用的插槽，為了讓這個特性成為可能，把需要的數據全部包裹在一個slot元素上，然后通過 slot-scope 特性，把數據從子組件獲取出來。

注意：在 vue 的 2.5.0 版本以下，slot-scope 必須綁定在 template 元素上，而更高版本 vue，沒有此限制，可以用於任何元素或組件上。