Vue一個案例引發「內容分發slot」的最全總結

Modeng發表於2018-12-01
Vue

今天我們繼續來說說 Vue，目前一直在自學 Vue 然後也開始做一個專案實戰，我一直認為在實戰中去發現問題然後解決問題的學習方式是最好的，所以我在學習一些 Vue 的理論之後，就開始自己利用業餘時間做了一個專案，然後通過專案中的一些案例進行總結。

今天我們來說說 Vue 中的內容分發 <
slot>
，首先 Vue 實現了一套內容分發的 API，這套 API 是基於當前的 Web Components 規範草案，將 <
slot>
 元素作為承載內分發內容的出口，內容分發是 Vue 中一個非常重要的功能，很多第三方的框架庫都使用到了<
slot>
 功能，所以掌握這個技能是非常重要的。

它可以讓我們更加優雅的使用元件。

我對 <
slot>
 的理解有三點或者說優勢，當然，這個只是我個人的理解，如果你有不同理解的地方，歡迎交流討論，這樣才能碰出不一樣的花火。

回到主題，我對內容分發的三點理解：

  1. 可以優雅的包裝原生的 HTML 標籤
  2. 元件標籤可以巢狀，就像使用原生 HTML 標籤一樣
  3. 讓元件更加的通用和可複用

如果沒有 <
slot>
 元素，當我們在元件的標籤中使用元件標籤或者元件標籤中使用 HTML 原生標籤，都是沒有任何作用的，這個和我們以往使用和認識的 HTML 是相違背的。

下面我們就對這三點去做一個詳細的闡述，先從一個張圖開始。

Vue一個案例引發「內容分發slot」的最全總結

這個大家都見過，一個標準的 dialog 對話方塊，專案中也經常使用到，我們把它抽出來做成一個元件如下：

<
div class="dialog-panel">
  <
div class="dialog-header">
    <
h3 class="title">
標題<
/h3>
    <
button class="close">
x<
/button>
  <
/div>
  <
div class="dialog-content">
這是一個標準的 dialog 對話方塊<
/div>
  <
div class="dialog-footer">
    <
el-button type="primary" plain>
取消<
/el-button>
    <
el-button type="primary">
確定<
/el-button>
  <
/div>
<
/div>
複製程式碼

首先這個元件不夠靈活，內容基本上是寫死的，就拿標題來說，我們希望標題是可以變化的，讓使用者可以傳遞標題進來，那麼我們該如何去設計我們的這個元件呢？這就是我們今天要說的內容分發 <
slot>
了，我們小小的修改下我們的例子。

<
div class="dialog-panel">
  <
slot>
<
/slot>
  <
div class="dialog-content">
這是一個標準的 dialog 對話方塊<
/div>
  <
div class="dialog-footer">
    <
el-button type="primary" plain>
取消<
/el-button>
    <
el-button type="primary">
確定<
/el-button>
  <
/div>
<
/div>
複製程式碼

在父元件中使用它

<
dialog-panel>
  <
div class="dialog-header">
    <
h3 class="title">
傳遞進來的標題<
/h3>
    <
button class="close">
x<
/button>
  <
/div>
<
/dialog-panel>
複製程式碼

你會發現元件渲染之後，<
slot>
 元素會被替換成元件中包裹的元素，標題的內容完全由外部傳遞進來。

Vue一個案例引發「內容分發slot」的最全總結

上面我們只是巢狀了一個簡單的 div 標籤元素，插槽可以傳入任何的元素，不管是HTML，還是元件元素。

插槽的預設內容

不僅如此，插槽還支援預設內容，當我們在外部沒有傳遞給插槽內容時，我們可以給插槽一個預設的顯示內容，如果外部有內容，預設的內容將會被外部的內容替換掉。

<
div class="dialog-panel">
  <
slot>
    <
div class="dialog-header">
        <
h3 class="title">
這是預設標題<
/h3>
        <
button class="close">
x<
/button>
    <
/div>
  <
/slot>
  <
div class="dialog-content">
這是一個標準的 dialog 對話方塊<
/div>
  <
div class="dialog-footer">
    <
el-button type="primary" plain>
取消<
/el-button>
    <
el-button type="primary">
確定<
/el-button>
  <
/div>
<
/div>
複製程式碼

在父元件中使用它，不巢狀任何的內容時，我們的元件就會有個預設的渲染標題。

<
dialog-panel>
    //無內容<
/dialog-panel>
複製程式碼
Vue一個案例引發「內容分發slot」的最全總結

如果我們在父元件中提供了內容，預設的內容就會被替換。

<
dialog-panel>
    <
div class="dialog-header">
        <
h3 class="title">
我是新傳遞的標題<
/h3>
        <
button class="close">
x<
/button>
    <
/div>
<
/dialog-panel>
複製程式碼
Vue一個案例引發「內容分發slot」的最全總結

具名插槽

有些時候，我們除了標題有這麼高的自由度之外，我們也想其它的內容也有這樣的靈活性，讓使用者也能通過父元件傳遞進來，Vue 中給我們提供了方法，我們一次可以使用很多插槽，然後給每一個插槽起個名字，也就是給我們的 <
slot>
 新增一個 name 屬性。

於是我們就開始修改我們的對話方塊

<
div class="dialog-panel">
  <
slot name="header">
<
/slot>
  <
slot name="content">
<
/slot>
  <
slot name="footer">
<
/slot>
<
/div>
複製程式碼

我們在外部使用時，只需要提供相應名稱，我們就可以渲染出我們需要的

<
dialog-panel>
  <
template slot="header">
    <
div class="dialog-header">
      <
h3 class="title">
帶名字的插槽<
/h3>
      <
button class="close">
x<
/button>
    <
/div>
  <
/template>
  <
template slot="content">
    <
div class="dialog-content">
這是一個標準的 dialog 對話方塊<
/div>
  <
/template>
  <
template slot="footer">
    <
div class="dialog-footer">
      <
el-button type="primary" plain>
取消<
/el-button>
      <
el-button type="primary">
確定<
/el-button>
    <
/div>
  <
/template>
<
/dialog-panel>
複製程式碼
Vue一個案例引發「內容分發slot」的最全總結

可以看到，我們在外部可以控制元件的全部內容只要我們需要，這給我們的元件帶來了很高的靈活性。除了靈活性，Vue 中還給我提供了一種叫 作用域插槽 的用法，它讓我們的元件更加的複用性。

具名插槽不僅僅只能用在 <
template>
 元素上，它也可以直接用在一個普通的元素上

<
div slot="header" class="dialog-header">
    <
h3 class="title">
帶名字的插槽<
/h3>
    <
button class="close">
x<
/button>
<
/div>
複製程式碼

作用域插槽

作用域插槽在 Vue 中是一個非常重要的一個功能，它讓元件更加的可複用性，但是官方文件上對作用域插槽的解釋很令人蛋疼，反正我是看了幾遍不是太理解，最後通過自己寫了幾個案例才明白原來可以這麼厲害，如果你也和我一樣一開始不太理解，不妨跟著我看看下面的案例或許對你的幫助很大。

首先我們實現一個星級評價元件

Vue一個案例引發「內容分發slot」的最全總結
<
template>
<
div class="rate-list">
    <
span      v-for="(star, index) in stars"      :key="index"      @click="clickStart(index)"    >
      <
i v-bind:class="[star ? off : on]">
<
/i>
    <
/span>
<
/div>
<
template>
<
script>
export default { 
 name: "RateList",  data() { 
   return { 
     off: "el-icon-star-off",      on: "el-icon-star-on",      rating: 2    
  };
  
  },  methods: { 
   clickStart(index) { 
     this.rating = index + 1;
    
  }  
  },  computed: { 
   stars() { 
     return [1, 2, 3, 4, 5].map(value =>
 this.rating <
 value);
    
  }  
  }
  };
<
/script>
複製程式碼

這是我們寫死的一個星級評價元件，一直都用著還不錯，可是突然有一天呢，產品說這個小星星用膩歪了能不能換個別的圖示？我最近愛上了 ❤️ 形所以用這個表示吧。到這裡，你可能也想到了我們把這個圖示給抽離出來，放在外部，所以我們結合上面剛剛學到的 <
slot>
 元素去修改元件。

<
div class="rate-list">
    <
slot>
<
/slot>
<
/div>
複製程式碼

在父元件中使用：

<
rate-list>
  <
span     v-for="(star, index) in stars"     :key="index"     @click="clickStart(index)"  >
    <
i v-bind:class="[star ? off : on]">
<
/i>
  <
/span>
<
/rate-list>
複製程式碼

完成之後呢，我們再也不怕以後更換內容的情況了，不管以後怎麼換，我都可以在使用的時候直接在外部新增內容即可，但是似乎有一些問題，因為我們的程式碼看起來不是很優雅，而且我們把操作邏輯都放在的父元件中，這顯然不太友好，最好的方式肯定是我們只需要在父元件中直接呼叫即可，所以作用域插槽這裡就起到很大的作用了，我們來看看如果使用作用域插槽是如何保持優雅的。

<
div class="rate-list">
    <
span      v-for="(star, index) in stars"      :key="index"      @click="clickStart(index)"    >
      <
slot :star="star">
<
/slot>
    <
/span>
<
/div>
複製程式碼

在父元件中使用：

<
rate-list>
  <
template slot-scope="props">
    <
i :class="[props.star ? off : on]">
<
/i>
  <
/template>
<
/rate-list>
複製程式碼

可以看到我們把操作邏輯全部都放在了元件內部，在外部我們只需要新增需要的元素即可，簡單優雅高複用性。

在 Vue2.5.0+，slot-scope 不再限制在 <
template>
 元素上使用，而可以用在插槽內的任何元素或元件上

有些同學看到這裡可能還沒有很好的理解作用域插槽，那好吧我就送佛送到西，我們繼續看一個例子，我們建立一個列表皮膚元件。

<
template>
  <
div class="list-box">
    <
h1>
{{title
  }
  }<
/h1>
    <
ul>
      <
li v-for="(item, index) in list" :key="index">
        <
slot :item="item">
<
/slot>
      <
/li>
    <
/ul>
  <
/div>
<
/template>
<
script>
export default { 
 name: "List",  props: { 
   title: String,    list: Array  
  }
  };
<
/script>
複製程式碼

在父元件中使用：

<
template>
  <
div class="tirp-wrapper">
    <
list title="酒店列表" :list="list">
      <
span slot-scope="props">
        {{props.item.name
  }
  }      <
/span>
    <
/list>
  <
/div>
<
/template>
<
script>
import List from "./List";
export default { 
 name: "Trip",  components: { 
List 
  },  data() { 
   return { 
     list: [{ 
       name: "四季度假村酒店"      
  },{ 
       name: "布宜諾斯艾利斯四季酒店"      
  },{ 
       name: "孟買四季酒店"      
  },{ 
       name: "新加坡四季酒店"      
  }]    
  };
  
  }
  };
<
/script>
複製程式碼
Vue一個案例引發「內容分發slot」的最全總結

我們再來給每個酒店新增一些描述標籤，也能夠完美的展示出來。

<
template>
  <
div class="tirp-wrapper">
    <
list title="酒店列表" :list="list">
      <
div slot-scope="props">
        <
span>
        {{props.item.name
  }
  }      <
/span>
      <
el-tag>
{{props.item.tag
  }
  }<
/el-tag>
      <
/div>
    <
/list>
  <
/div>
<
/template>
<
script>
import List from "./List";
export default { 
 name: "Trip",  components: { 
List 
  },  data() { 
   return { 
     list: [{ 
         name: "四季度假村酒店",          tag: "海濱風光"        
  },{ 
         name: "布宜諾斯艾利斯四季酒店",          tag: "輕奢度假"        
  },{ 
         name: "孟買四季酒店",          tag: "服務周到"        
  },{ 
         name: "新加坡四季酒店",          tag: "沙海綠洲"        
  }]    
  };
  
  }
  };
<
/script>
複製程式碼
Vue一個案例引發「內容分發slot」的最全總結

畫風一轉，下面我們把它變成一個訊息通知列表，可以看到每個文章的點贊數量。

<
template>
  <
div class="tirp-wrapper">
    <
list title="訊息通知" :list="list">
      <
div slot-scope="props">
        <
span>
        {{props.item.title
  }
  }      <
/span>
      <
el-badge :value="props.item.value" :max="99">
        <
el-button size="mini">
          <
i class="fa fa-thumbs-o-up">
<
/i>
        <
/el-button>
      <
/el-badge>
      <
/div>
    <
/list>
  <
/div>
<
/template>
<
script>
import List from "./List";
export default { 
 name: "Trip",  components: { 
List 
  },  data() { 
   return { 
     list: [{ 
         title: "Vue一個案例引發「動畫」的使用總結",          value: 200        
  },{ 
         title: "Vue一個案例引發的遞迴元件的使用",          value: 20        
  },{ 
         title: "Vue一個案例引發的動態元件與全域性事件繫結總結",          value: 50        
  }]    
  };
  
  }
  };
<
/script>
複製程式碼
Vue一個案例引發「內容分發slot」的最全總結

可以看到，不管我們如何的去修改資料結構也好，新增不同的內容也罷，我們都可以完美的完成，而且不用修改我們的子元件，只需要在外部呼叫時填充我們需要的內容即可。

有沒有感受到作用於插槽的強大與靈活。

如果用一句話來描述作用域插槽的話：它可以讓我們在父元件中訪問子元件的資料，就像利用 props 屬性讓子元件訪問到父元件的資料一樣。

總結

插槽是一個重要且非常強大的功能，它可以讓我們的元件具有非常 的靈活性與可複用性，而作用域插槽更加的強化了這些特性。

作用域插槽是一個不太好理解的地方，希望通過本篇文章能夠讓你解惑。

如果你覺得本文對你有幫助，歡迎轉發，點贊，不足之處歡迎指正!

Vue一個案例引發「內容分發slot」的最全總結

來源：https://juejin.im/post/5c0255e6e51d457ce0452f90

相關文章