vue的插槽

插槽這個概念相對就比較抽象，但抽象的概念用生活中常見的事物去做類比，也就變得沒那么抽象了！

舉一個生活中的例子：比如裝修房子的時候我們會在很多地方預留出一些插孔，可能要插電冰箱，插電式，插充電器等，反正就是你覺得預留在這個位置的插座一定有用，這個預留的插座就類似我們今天要說的插槽，插槽就是你在模板中提前通過一個占位符(slot)來預言一塊固定的區域將來會被某些元素替換掉，但是這個位置我得先預留出來，

在veu 2.6.0 中，具名插槽和作用域插槽引入了一個新的統一的語法 (即 v-slot 指令)，它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在檔案中的 attribute，

插槽的基本使用

1. 在組件中定義一個<slot></slot>標簽即可
2. 如果插槽內具有共性的東西較多，可在插槽內設定默認值，當沒有在插槽傳入值時顯示默認值
3. 如果有多個值，同時放入到組件中進行替換時，一起作為替換元素

定義一個默認插槽

插槽的定義位置在組件中，所以首先我們得創建一個組件，再在這個組件中定義插槽，再使用！

老規矩，翠花上代碼：

<div id="app">
	<mainview></mainview>
</div>
    
<!-- 組件模板 -->
<template id="view">
	<div>
		<slot>
			<button type="button">插槽默認值</button>
        </slot>
    </div>
</template>
    
    <script type="text/javascript">
      var app = new Vue({
        el: "#app",
        components:{
          // view注冊為一個區域組件
          mainview: {
            template: "#view"
          }
        }
      })
    </script>

運行這段代碼我們會看到組件為我們渲染除了slot插槽里的默認內容，當然我們也可以不用設定默認內容，那么它將不會顯示任何東西，那如何覆寫默認內容呢？只需要在組件中插入你需要顯示的內容即可，如下：

<mainview>
	<button type="button" style="color: #42B983;">
		修改插槽
	</button>
</mainview>

修改之后，我們可以看到渲染的內容已經變成了我們在 mainview 中定義的內容！

這就是插槽 <slot> 一個基本使用，還是比較好理解的，但一般在實際專案中不會像 demo 一樣簡單直接，

通常情況下，一個頁面設計非常復雜，需要在一個頁面的不同位置放入不同的插槽內容，那么在這種情況下，我們就需要給插槽 <slot> 指定一個具體的名稱 name，使其具有具體匹配的特性，在 Vue 中把這種具有具體名稱 name 的插槽叫做具名插槽，

具名插槽

現在，假設我們要做一個博客頁面，這個頁面分為三個部分頭部header, 內容main，底部footer，這三個模塊我們都通過插槽來實作！

老規矩，翠花上代碼：

<div id="app">
	<!-- 參考插槽 -->
	<base-layout>
		<template v-slot:header>
          <h1>這是頭部header插槽內容</h1>
        </template>
        
        <template v-slot:default>
          <p>這是默認插槽的內容</p>
        </template>
        
        <template v-slot:footer>
          <p style="color: red;">這是footer插槽內容</p>
        </template>
        
      </base-layout>
</div>
    
    <!-- 定義組件間模板 -->
    <template id="layout">
      <div>
        <header>
          <!-- 定義具名插槽 -->
          <slot name="header"></slot>
        </header>
        <main>
          <slot></slot>
        </main>
        <footer>
          <slot name="footer"></slot>
        </footer>
      </div>
    </template>
    
    <script type="text/javascript">
      var app = new Vue({
        el: "#app",
        components:{
          // 區域注冊組件
          BaseLayout: {
            template: "#layout"
          }
        }
      })
    </script>

以上案例中layout組建中定義了三個插槽，其中header和footer通過slot的name屬性制定了插槽的名稱，main用一個默認插槽填充，其中header和footer兩個具名插槽會精確地匹配 name傳入相應的插槽，任何沒有被包裹在帶有 v-slot 的 <template> 中的內容都會被視為默認插槽的內容，

注意： v-slot 只能添加在 <template> 上 ，并且可以縮寫為一個#，即把引數之前的所有內容 (v-slot:) 替換為字符 #，例如 v-slot:header 可以被重寫為 #header：

<template #header>
	<h1>這是頭部header插槽內容</h1>
</template>

作用域插槽

什么是作用域插槽？要弄清楚這個問題就得先知道作用域的概念，我們一起先來看看百度百科給出的解釋！

百度百科：通常來說，一段程式代碼中所用到的名字并不總是有效/可用的，而限定這個名字的可用性的代碼范圍就是這個名字的作用域，

作用域的使用提高了程式邏輯的區域性，增強程式的可靠性，減少名字沖突，

vue的作用域插槽在2.6版本中有所改變，之前版本中使用的slot-scope命令已經廢棄，統一成了v-slot方法，

老規矩，翠花上代碼：

<div id="app">
    <!-- 引入組件 -->
    <current-user></current-user>
</div>

<!-- 定義CurrentUser組件模板 -->
<template id="account">
    <div>
        <slot>
        	{{ user.LastName }}
        </slot>
    </div>
</template>

   <script type="text/javascript">
      var app = new Vue({
        el: "#app",
        components:{
          CurrentUser: {
            template:"#account",
            data:function(){
              return {
                user: {
                  fristName: "劉",
                  lastName: "德華"
                }
              }
            },
          }
        }
      })
    </script>

我們來看這個例子，首先我們定義了一個<current-user>的組件，這個組件的模板中定義了一個默認插槽并設定了一個初始值{{ user.lastName }}，運行這段代碼會看到如期渲染除了組建中傳入的lastName的值，但是有一天這個名字我不讓顯示了，只讓顯示一個姓就行了，我們知道插槽就是為了預定義一個區塊，之后你想插入什么隨你，但是要在父組件中呼叫子組件的frstName覆寫掉插槽默認傳入的lastName要怎么做呢？這時候就是作用域插槽出場的時候了！

我們看作用域的概念發現里邊總是提到作用域是一個有名字的代碼范圍，其實這在Vue的插槽表現形式中應該就是具名插槽，具名插槽要用到v-slot指令，v-slot又只能在template中使用，

首先，我們必須把子組件的user作為slot的元素屬性通過v-bind系結上去才可以，這個系結在 <slot> 元素上的 屬性 （user）被稱為插槽 prop，

<slot v-bind:user="user">
	{{ user.lastName }}
</slot>

現在在父級作用域中，我們可以使用帶值的 v-slot 來定義我們提供的插槽 prop 的名字：

<div id="app">
	<current-user>
		<template v-slot:default="slotProps">
          {{ slotProps.user.fristName }}
        </template>    
	</current-user>
</div>

在這個例子中，我們選擇將包含所有插槽 prop 的物件命名為 slotProps，但你也可以使用任意你喜歡的名字，

注意，如果當我們提供的組件模板中有且僅有一個默認插槽時，組件的標簽可以被當做插槽的模板使用，簡寫為：

<current-user>
    <!-- 簡寫 -->
	<template v-slot="slotProps">
		{{ slotProps.user.fristName }}
	</template>    
</current-user>

但是，注意默認插槽的縮寫語法不能和具名插槽混用，因為它會導致作用域不明確！

動態插槽

動態插槽依賴的是Vue2.6新增的動態引數概念，這里我大致說一下什么是動態引數：

<a v-bind:[attributeName]="url"> ... </a>

這個示例中用方括號括起來的 JavaScript 運算式作為一個指令的引數進行動態求值，求得的值將會作為最終的引數來使用！

這個動態的值可以通過方法，計算屬性或者data里的資料作為內容，如下所示：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

感謝您的閱讀，如果對您有幫助，歡迎關注"CRMEB"，碼云上有我們開源的商城專案，知識付費專案，JAVA版全開源商城系統，學習研究歡迎使用，老鐵順手點個star唄，老板獎勵五毛，分你兩毛五，😂😂關注我們保持聯系！