> 作者：鯨騰FE，來自鯨騰網路。是一支專注於 Web 前端的開發團隊，並在 Web 前端領域積累了多年的疑難問題解決經驗。崇尚高效、優質、成長、自由、快樂。
> 
> 來源：[恆生LIGHT雲社群](https://developer.hs.net/thread/2080 "恆生LIGHT雲社群")

**一、定義**

vue中插槽指的就是在元件中用標籤 `<slot></slot>`定義的預留位置，該標籤有個name屬性，使用者可以根據實際情況對其設定，或者不設定都可以。設定了name屬性的插槽叫做【具名插槽】，沒有設定name屬性的叫【不具名插槽】。在父元件中使用子元件時，可以在使用子元件標籤內透過v-slot宣告插槽名或不宣告插槽名的方式往子元件中的具名插槽或者不具名插槽中寫入html程式碼。

插槽使用的特性在於：在父元件中使用子元件標籤的時候可以往子元件內寫入程式碼。

**二、使用步驟**

1. 子元件中用`<slot>`標籤定義插槽
2. 父元件中使用子元件時利用v-slot在子元件標籤內寫入html程式碼。
3. v-slot搭配`<template>`標籤使用

**三、插槽使用場景**

這樣的場景：一個父元件，一個子元件。

父元件

```
<template>
  <div class="slot-content">
    <student v-slot:default="">wangxiaoer</student>
  </div>
</template>
```

子元件

```
<template>
  <div>
    <span>name: </span>
  </div>
</template>
```

在這裡，父元件想直接在標籤中插入名字。但是事與願違。透過瀏覽器的渲染，我們發現“wangxiaoer"欄位並沒有顯示。如下圖3.1。如果我們想在父元件中寫入程式碼並在子元件成功渲染，我們就可以用插槽幫助我們實現。

![插槽3-1.png](https://developer.hs.net/storage/attachments/2022/02/25/thQDKGOUPgaQLPNciuQAbsn196EFUTlsEabbDVgU_thumb.png "5219")

（圖3.1）

**四、插槽使用方法**

我們對上面子元件的程式碼進行改造

```
<template>
  <div>
    <span>name: </span>
    <slot></slot>
  </div>
</template>
```

父元件程式碼不變，這時候我們發現，瀏覽器上出現了在父元件往元件插入到”wangxiaoer“。如圖4.1

![插槽4_1.png](https://developer.hs.net/storage/attachments/2022/02/25/ACW9yVfQPXbpsGEvUypRNQgKzgdG6ERyrDK4Kx1B_thumb.png "5220")

（圖4.1）

結合定義，我們會發現，這個場景中我們使用的是不具名插槽。那麼具名插槽怎麼使用呢？我們繼續對上面的程式碼進行改造

子元件改造如下

```
<template>
  <div>
    <div>
      <span>name: </span>
      <slot></slot>
    </div>
    <div>
      <span>age：</span>
      <slot name="age-slot"></slot>
    </div>
  </div>
</template>
```

父元件改造如下

```
<template>
  <div class="slot-content">
    <student v-slot:default="">wangxiaoer</student>
    <student>
      <template v-slot:default="">
        wangdagang
      </template>
      <template v-slot:age-slot="">
         18歲
      </template>
    </student>
  </div>
</template>
```

效果如下圖4.2。

![插槽4.2.png](https://developer.hs.net/storage/attachments/2022/02/25/hhbwrbynsozT7LinPMEDYeV8ulF746tdRzKLvsmy_thumb.png "5221")

（圖4.2）

可以看出，v-slot: default指的是不具名插槽。當我們給v-slot賦值正常的字串時，這個字串就是插槽的名稱。

**五、作用域插槽**

作用域插槽在官網中是這麼描述的：父元件模板的所有內容都會在父級作用域內編譯。簡單的說，就是父元件中不能直接用子元件定義的data資料。而scope的出現就是解決了這樣的問題。

使用方法：

在v-slot宣告後面用 = 連線作用域插槽完成作用域插槽的宣告，例子（v-slot:defaule="scope"）

有這樣的場景：一個子元件，一個父元件

父元件

```
<template>
  <div>
    <teacher>
      <template v-slot:teacher-info="">
        <div v-for="item in list">
          父元件傳入的內容
          <div>name: {{item.name}}</div>
          <div>age: {{item.age}}</div>
        </div>
      </template>
    </teacher>
  </div>
</template>
```

子元件

```
<template>
  <div>
    這是子元件
    <slot name="teacher-info"></slot>
  </div>
</template>

<div>
  export default {
    name: 'SlotScope',
    components: {},
    data () {
      return {
        list: [{
          name: 'zhangyue',
          age: '18'
        }, {
          name: 'liuyue',
          age: '20'
        }, {
          name: 'zhaoyue',
          age: '22'
        }]
      };
    },
    methods: {}
  }
</div>
```

從程式碼邏輯上看，顯而易見，該場景是父元件在渲染子元件時利用子元件中的list做處理。但是根據瀏覽器的渲染結果來看是失敗了。如圖5.1

![插槽5_1.png](https://developer.hs.net/storage/attachments/2022/02/25/vJy2jWjpqdAZU1YpCiar8CiiBNViLPz4LTnQPsV7_thumb.png "5222")

（圖5.1）

要實現上面場景的需求，就可以使用scope來實現需求。程式碼改造如下

父元件程式碼改造如下

```
<template>
  <div>
    <teacher>
      <template v-slot:teacher-info="scope">
        <div v-for="item in scope.list">
          父元件傳入的內容
          <div>name: {{item.name}}</div>
          <div>age: {{item.age}}</div>
        </div>
      </template>
    </teacher>
  </div>
</template>
```

此時可以看到瀏覽器成功將我們想實現的效果渲染出來了。如圖5.2

![插槽5_2.png](https://developer.hs.net/storage/attachments/2022/02/25/CZm1tmKrHA2O7Rc6qyySM26aBG1HNXAX59HJa0pi_thumb.png "5223")

（圖5.2）</template></slot>

Vue 開發之插槽（slot）的理解和使用

相關文章