一号枕、什么是插槽缰揪？

在進行組件化開發(fā)時，通常會遇到同一個功能葱淳，有共性的部分钝腺，也有不同的部分，此時我們就需要在子組件內(nèi)赞厕，將不同的部分預(yù)留一個槽口即<slot></slot>艳狐，此時父組件在調(diào)用子組件時，就可以通過預(yù)留的槽口向子組件內(nèi)插入不同的內(nèi)容皿桑，實現(xiàn)不同內(nèi)容的動態(tài)化展示毫目，子組件內(nèi)預(yù)留的槽口<slot></slot> 就是插槽蔬啡。

二、插槽的作用

多個模塊間具有相同的部分镀虐，又有各自不同的功能時箱蟆，此時如果不想多次寫重復(fù)的代碼時，就可以將該多個模塊抽取為一個公共組件刮便，不同的部分設(shè)置插槽空猜，父組件調(diào)用時通過插槽動態(tài)傳遞內(nèi)容即可。下面是插槽應(yīng)該的小例子恨旱，一個模塊的標(biāo)題是一樣的辈毯，但是展示內(nèi)容不一致。

三窖杀、插槽的應(yīng)用

子組件

<template>
  <div>
    <p>listData</p>
    <slot>
      <ul>
        <li v-for="item in listData" :key="item.name">{{item.name}}</li>
      </ul>
    </slot>
  </div>
</template>

父組件

<template>
  <div>
    <Cslot>
      <h4>自己插入的插槽</h4>
    </Cslot>

    <Cslot></Cslot>
  </div>
</template>

四漓摩、具名插槽

有時我們需要多個插槽時，需要給子組件內(nèi)的插槽定義一個名字入客，確保父組件在插入時管毙，可以一 一對應(yīng)。一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”桌硫。

子組件

<template>
  <div>
    <p>listData</p>
    <slot>
      <ul>
        <li v-for="item in listData" :key="item.name">{{item.name}}</li>
      </ul>
    </slot>
    
    <slot name="centerSlot">
      <p>我是中間的slot</p>
    </slot>
  </div>
</template>

父組件 通過v-slot組件綁定需要對應(yīng)的slot名稱即可 即：v-slot:centerSlot 也可以簡寫為#centerSlot（適用于template模板）

<template>
  <div>
    <Cslot></Cslot>
    <Cslot>
     <template #centerSlot> 
      <div>具名插槽</div>
      <h4>自己插入的插槽</h4>
    </template>

    </Cslot>
  </div>
</template>

也可以不通過template 直接在元素上綁定需要插入的插槽名字夭咬，當(dāng)與template同時存在時，template優(yōu)先級最高

<template>
  <div>
    <Cslot></Cslot>
    <Cslot>
     <div slot='centerSlot'> 
          <div>具名插槽</div>
          <h4>自己插入的插槽</h4>
      </div>
    </Cslot>
  </div>
</template>

五铆隘、作用域插槽卓舵，（為了讓插槽內(nèi)容能夠訪問子組件中的數(shù)據(jù)）即父組件需要獲取子組件的數(shù)據(jù) 重新修改渲染。

父組件有自己的作用域膀钠，只能訪問自己作用域內(nèi)的數(shù)據(jù)掏湾。

具體實現(xiàn)，子組件在slot上通過綁定屬性將數(shù)據(jù)綁定上
父組件需要通過template模板 通過v-slot指令 獲取對應(yīng)slot傳過來的數(shù)據(jù)（是一個對象：{{centerData：listData}}肿嘲，需要點傳遞時的屬性[centerData]獲取具體傳過來的值[listData]）融击。代碼如下

子組件

<template>
  <div>
    <slot name="centerSlot" v-bind:centerData="listData">
      <p>我是中間的slot</p>
    </slot>
  </div>
</template>

父組件

<template>
  <div>
    <current-slot></current-slot>
    <current-slot>
      <template v-slot:centerSlot="slotProps">
        <span v-for="item in  slotProps.centerData" :key="item.name">---{{item.age}}---</span>
      </template>
    </current-slot>
  </div>
</template>