插槽slot 2.6版本詳解

插槽slot 2.6版本詳解

slot的出現是爲了父組件能夠冠冕堂皇地在子組件中加入內容

一、插槽內容

1.一、一個插槽

默認狀況下，在子組件裏面插入內容是不會顯示出來的，下面Son裏面h1是沒有顯示出來的

• 父組件

<div class="father">
     <Son>
         <h1>在子組件插入內容</h1>
     </Son>
   </div>

• 子組件

<div class="son">dd</div>

怎麼才能顯示出來呢？這時候看到最開始那句話 slot的出現是爲了父組件能夠冠冕堂皇地在子組件中加入內容 ，這時候就要用到slot，子組件作以下更改：

• 子組件更改

  用了slot，你在父組件裏面加的任何標籤，都會顯示在子組件裏面。

<div class="son">
    dd
    <slot></slot>
</div>

1.二、多個插槽（具名插槽）

具名插槽也很簡單，好比有多個插槽，我做爲父組件，確定想區別子組件中的幾個插槽，那就要用slot標籤的name屬性來標識了

這裏偷懶下，借鑑官方文檔，其實也就是在子組件裏面寫了多個slot，你怎麼知道你寫的內容是哪一個slot的，默認你不命名，每一個slot都會把你寫在子組件的內容拷貝一份。

• 子組件（沒有命名的，其實有個默認的名字叫default）

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

• 父組件

  這裏很明顯了，父組件往子組件對應的位置填充內容時，用v-slot:名字

  如今 元素中的全部內容都將會被傳入相應的插槽。任何沒有被包裹在帶有v-slot的 中的內容都會被視爲默認插槽的內容。

  <base-layout>
    <template v-slot:header>
      <h1>Here might be a page title</h1>
    </template>
  
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  
    <template v-slot:footer>
      <p>Here's some contact info</p>
    </template>
  </base-layout>

二、做用域插槽（2.6）

一般狀況下普通的插槽是父組件使用插槽過程當中傳入東西決定了插槽的內容。但有時咱們須要獲取到子組件提供的一些數據，那麼做用域插槽就排上用場了。

2.一、使用

• 子組件

<slot :data="data"></slot>

 data () {
 return {
 data: { // 內部狀態
 username: 'oli'
 }
 }
 }

• 父組件

  一、user你隨意寫名字，不重要

  二、 也能夠不書寫 default 關鍵字，默認就是假定對應默認插槽

<template v-slot:default="user">{{user.data.username}}</template>

使用 v-slot 綁定一個命名空間 user，這樣就能夠經過 user 對象引用到子組件中傳入的數據了 ，能夠傳多個數據，都在user這個對象裏面能夠引用到

2.二、解構插槽

做用域插槽的內部工做原理是將你的插槽內容包括在一個傳入單個參數的函數裏

這意味着 v-slot 的值實際上能夠是任何可以做爲函數定義中的參數的 JavaScript 表達式。因此在支持的環境下 (單文件組件或現代瀏覽器)，你也能夠使用 ES2015 解構來傳入具體的插槽 prop，以下：

• 父組件改造

  <template v-slot:default="{data}">{{data.username}}</template>

2.三、具名插槽的縮寫

注意是具名插槽，這裏把官網的搬過來

跟 v-on 和 v-bind 同樣，v-slot 也有縮寫，即把參數以前的全部內容 (v-slot:) 替換爲字符 #。例如 v-slot:header 能夠被重寫爲 #header：

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

然而，和其它指令同樣，該縮寫只在其有參數的時候纔可用。這意味着如下語法是無效的：

<!-- 這樣會觸發一個警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

若是你但願使用縮寫的話，你必須始終以明確插槽名取而代之：

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

參考連接

vue做用域插槽，你真的懂了嗎？

官方連接

詳解Vue 匿名、具名和做用域插槽的使用方法