Vue中的slot

我的理解：
是對組件的擴展，經過slot插槽向組件內部指定位置傳遞內容，經過slot能夠父子傳參；

 

Slot的通俗理解

是「佔坑」，在組件模板中佔好了位置，當使用該組件標籤時候，組件標籤裏面的內容就會自動填坑（替換組件模板中<slot>位置），當插槽也就是坑<slot name=」mySlot」>有命名時，組件標籤中使用屬性slot=」mySlot」的元素就會替換該對應位置內容；

Slot使用
一、組件中有單個或多個未命名slot標籤時，以下：
<Child><span style=」color:red;」>hello world</span></Child>   

 

<template>    

  <div>

<slot></slot>

<slot  style=」color:blue;」 >這是在slot上添加了樣式</slot>

<slot  name=」mySlot」>這是擁有命名的slot的默認內容</slot>

</div>

</template>

會輸出：兩個紅色的hello world，以及一個使用slot的默認內容

 

注意：在slot標籤添加樣式無效。擁有命名的插槽不能被不含slot屬性的標籤內容替換，會顯示slot的默認值（具名slot具備對應性）；

二、組件中有多個命名的slot插槽時，能夠實現父組件對子組件的指定位置顯示內容或傳參，以下：

<Child>

<span slot="header">hello world</span>

<span slot="main">hello world</span>

<span slot="footer">hello world</span>

<span slot="other">{{otherData}}</span>

</Child>

 

<template>

<div>

<slot  name=」header」>這是擁有命名的slot的默認內容</slot>

<slot  name=」main」>這是擁有命名的slot的默認內容</slot>

<slot  name=」footer」>這是擁有命名的slot的默認內容</slot>

<slot  name=」other」>這是擁有命名的slot的默認內容</slot>

</div>

</template>

 

三、做用域插槽！！：
使用時候子組件標籤<Child>中要有<template scope=」scopeName」>標籤，再經過scopeName.childProp就能夠調用子組件模板中的childProp綁定的數據，因此做用域插槽是一種子傳父傳參的方式，解決了普通slot在parent中沒法訪問child數據的去問題；

做用域插槽表明性的用例是列表組件，容許在parent父組件上對列表項進行自定義顯示，以下該items的全部列表項均可以經過slot定義後傳遞給父組件使用，也就是說數據是相同的，不一樣的場景頁面能夠有不一樣的展現方式：

   <ul>

      <slot name="item" v-for="item in items" :text="item.text" :myname="item.myname" >

         slot的默認內容

      </slot>

   </ul>

 

   <Child>

      <template slot="item" scope="props">

        <li>{{props.myname}}</li>

      </template>

   </Child>