讓你的組件變幻無窮，Vue slot 剖玄析微

時間 2019-11-16

標籤讓你組件變幻無窮 vue slot 简体版

原文原文鏈接

原創不易，但願能關注下咱們，再順手點個贊~~

本文首發於政採雲前端團隊博客：讓你的組件變幻無窮，Vue slot 剖玄析微html

（一）前言

Vue 代碼中的 slot 是什麼，簡單來講就是插槽。 <slot> 元素做爲組件模板之中的內容分發插槽，傳入內容後 <slot> 元素自身將被替換。前端

看了上面這句官方解釋，可能同樣不知道 slot 指的是什麼，那麼就來看看在 Vue 中，何時你須要用到 slot 。vue

舉例：一個組件的展現層你須要作到大致結構固定，但其內的部分結構可變，樣式表現不固定。例如 Button 中是否顯示 icon ，或者 Modal 框的中間內容展現區域的變化等，要經過子組件本身實現是不可能的。組件並不直接支持 HTML DOM 結構的傳遞，此時就能夠經過使用 slot 做爲 HTML 結構的傳遞入口來解決問題。性能優化

（二）v-slot 用法

在 2.6.0 版本中，Vue 爲具名插槽和做用域插槽引入了一個新的統一的語法（即 <v-slot> 指令）。它取代了 slot 和 slot-scope 這兩個目前已被廢棄、還沒有移除，仍在文檔中的特性。ide

使用方法能夠分爲三類：默認插槽、具名插槽以及做用域插槽。函數

◎ 默認插槽

子組件編寫：在組件中添加 <slot> 元素，來肯定渲染的位置。post

// 子組件
  <template>
    <div class="content">
      <!-- 默認插槽 -->
      <header class="text">
        <!-- slot 的後備內容：爲一個插槽設置具體後備（默認）內容是頗有用的，當父組件不添加任何插槽內容時，默認渲染該後備內容的值。 -->
        <slot>默認值</slot>
      </header>
    </div>
  </template>
複製代碼

父組件編寫：任何沒有被包裹在帶有 v-slot 的 <template> 中的內容都會被視爲默認插槽的內容。當子組件只有默認插槽時， <v-slot> 標籤能夠直接用在組件上，也就是獨佔默認插槽的寫法性能

// 父組件
  <template>
    <div class="container">
      <!-- 默認插槽-->
      <child>
        任意內容
        <template>內容</template>
        中間內容
        <!-- <template v-slot:default>但若是你定義了 default 以後，其餘內容就不會出現了，原理同上，不能重複定義</template> -->
      </child>
    
      <!-- 獨佔默認插槽的縮寫 -->
      <child v-slot="slotProps">
        當只有默認插槽時，此爲獨佔默認插槽的縮寫<br>
        若是組件中有其餘具名插槽，這麼寫會報錯<br>
        slotProps 取的是，子組件標籤 slot 上屬性數據的集合
      </child>
    </div>
  </template>
複製代碼

渲染結果測試

◎ 具名插槽

子組件編寫：當須要使用多個插槽時，爲 <slot> 元素添加 name 屬性，來區分不一樣的插槽，當不填寫 name 時，默認爲 default 默認插槽。優化

// 子組件
  <template>
    <div class="content">
      <!-- 具名插槽 -->
      <main class="text">
        <slot name="main"></slot>
      </main>
      <footer class="text">
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>
複製代碼

父組件編寫：<template> 標籤中添加 v-slot:xxx 或者 #xxx 屬性的內容， # 表明插槽的縮寫。

// 父組件
  <template>
    <div class="container">
      <!-- 具名插槽使用 -->
      <child>
        <template v-slot:main>
          <a href="https://www.zcygov.cn" target="_blank">導航</a>
        </template>
        <template #footer>頁腳（具名插槽的縮寫#）</template>
        <template #footer>
          <!--  v-slot 重複定義一樣的 name 後只會加載最後一個定義的插槽內容 -->
          v-slot只會添加在一個 template 上面
        </template>
      </child>
    </div>
  </template>
複製代碼

渲染結果

◎ 做用域插槽

子組件編寫：有時讓父組件能訪問到子組件中的數據是頗有用的，咱們能夠將綁定在 <slot> 元素上的特性稱爲插槽 Prop ，固然也能夠傳遞一些 Function。

// 子組件
  <template>
    <div class="content">
      <!-- 做用域插槽 -->
      <footer class="text">
        <slot name="footer" :user="user" :testClick="testClick">
          {{user.name}}
        </slot>
      </footer>
    </div>
  </template>
  
  <script>
  export default {
    name: 'child',
    data () {
      return {
        user: {
          title: '測試title',
          name: '測試name'
        }
      };
    },
    methods:{
      testClick(){
      	// 子組件通用方法，可傳遞給父組件複用
        alert('123');
      }
    }
  };
  </script>
複製代碼

父組件編寫：被綁定的屬性的集合對象，在父元素中會被 v-slot:xxx="slotProps" 或者 #xxx="slotProps" 接收，xxx 表明具名插槽的 name ，slotProps 爲子組件傳遞的數據對象，能夠重命名。

// 父組件
  <template>
    <div class="container">
      <!-- 做用域插槽，以及解構插槽 Prop 的寫法 -->
      <child>
        <template #footer="slotProps">
          {{slotProps.user.title}}
          <button @click="slotProps.testClick">點我</button>
        </template>
        <template #footer="{user,testClick}">
          {{user.title}}<br>
          此爲解構插槽prop<br>
          <!-- 子組件中的通用方法，可傳遞給父組件複用 -->
          <button @click="testClick">點我</button>
        </template>
      </child>
    </div>
  </template>

  <script>
  import Child from './component/child.vue';
  export default {
    name: 'demo',
    components: {
      Child
    },
  };
  </script>
複製代碼

渲染結果

◎ 其餘拓展

解構插槽 prop 能夠重命名，例如：v-slot="{ user: person }" 將 user 對象重命名爲 person 使用。
解構插槽 prop 能夠賦值默認值，例如：v-slot="{ user = { name: 'Guest' } }" 給屬性添加自定義後備內容。
動態插槽命名，例如：v-slot:[dynamicSlotName] ，支持命名變量定義。

◎ 注意事項

v-slot 只能用在 template 上面，或者是獨佔默認插槽的寫法。
父組件引用時，重複定義了 v-slot 的 name 後只會加載最後一個定義的插槽內容。
當子組件只有默認插槽時，纔可使用獨佔默認插槽的縮寫語法，只要出現多個插槽，必須使用完整的基於 template 的語法。

（三）slot 以及 slot-scope 的用法

介紹完 v-slot 的基本用法，這裏咱們也順帶介紹一下以前的 slot 和 slot-scope 的用法以及區別。

◎ 子組件編寫

子組件的編寫方式沒什麼區別，下面是一個集合

// 子組件
  <template>
    <div class="content">
      <!-- 默認插槽 -->
      <header class="text">
        <slot>默認值</slot>
      </header>
      
      <!-- 具名插槽 -->
      <main class="text">
        <slot name="main"></slot>
      </main>
      
      <!-- 做用域插槽 -->
      <footer class="text">
        <slot name="footer" :user="user" :testClick="testClick">
          {{user.name}}
        </slot>
      </footer>
    </div>
  </template>
  
  <script>
  export default {
    name: 'child',
    data () {
      return {
        user: {
          title: '測試title',
          name: '測試name'
        }
      };
    }
  };
  </script>
複製代碼

◎ 父組件編寫

具名插槽：直接使用 slot 屬性，傳值爲子組件插槽的 name 屬性。
做用域插槽：經過 slot-scope 屬性來接受子組件傳入的屬性集合，其餘用法一致。

// 父組件
 <template>
   <div class="container">
     <child>
       <!-- 默認插槽 -->
       <div>默認插槽</div> 
      
       <!-- 具名插槽 -->
       <div slot="main">具名插槽</div>
       <div slot="main">具名插槽2</div>
      
       <!-- 做用域插槽 -->
       <div slot="footer" slot-scope="slotProps">
         {{slotProps.user.title}}
       </div>
     </child>
   </div>
 </template>

 <script>
 import Child from './component/child.vue';
 export default {
   name: 'demo',
   components: {
     Child
   },
 };
 </script>
複製代碼

最終渲染

◎ 須要注意

不一樣於 v-slot 的是，slot 中同名能夠重複定義屢次。
slot 能夠直接定義在子組件上。
v3.0 版本後不可以使用 slot ，建議直接使用 v-slot 。

（四）總結

插槽的 <slot> 的可複用特性，能夠用來寫一些組件結構固定，內容可替換的組件，例如表格，列表，按鈕，彈窗等內容。
插槽能夠傳遞屬性值或者 function 的特性，能夠在子組件中寫一些通用的函數，例如通用的報錯提示等，傳遞給父組件複用。

招賢納士

政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 50 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的「老」兵，也有浙大、中科大、杭電等校的應屆新人。團隊在平常的業務對接以外，還在物料體系、工程平臺、搭建平臺、性能體驗、雲端應用、數據分析及可視化等方向進行技術探索和實戰，推進並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。

若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「 5 年工做時間 3 年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手推進一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com