詳解Vue一個(gè)案例引發(fā)「內(nèi)容分發(fā)slot」的最全總結(jié)

更新時(shí)間：2018年12月02日 09:53:43 作者：Modenng

這篇文章主要介紹了詳解Vue一個(gè)案例引發(fā)「內(nèi)容分發(fā)slot」的最全總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

今天我們繼續(xù)來說說 Vue，目前一直在自學(xué) Vue 然后也開始做一個(gè)項(xiàng)目實(shí)戰(zhàn)，我一直認(rèn)為在實(shí)戰(zhàn)中去發(fā)現(xiàn)問題然后解決問題的學(xué)習(xí)方式是最好的，所以我在學(xué)習(xí)一些 Vue 的理論之后，就開始自己利用業(yè)余時(shí)間做了一個(gè)項(xiàng)目，然后通過項(xiàng)目中的一些案例進(jìn)行總結(jié)。

今天我們來說說 Vue 中的內(nèi)容分發(fā) <slot> ，首先 Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 是基于當(dāng)前的 Web Components 規(guī)范草案，將 <slot> 元素作為承載內(nèi)分發(fā)內(nèi)容的出口，內(nèi)容分發(fā)是 Vue 中一個(gè)非常重要的功能，很多第三方的框架庫都使用到了

<slot> 功能，所以掌握這個(gè)技能是非常重要的。

它可以讓我們更加優(yōu)雅的使用組件。

我對 <slot> 的理解有三點(diǎn)或者說優(yōu)勢，當(dāng)然，這個(gè)只是我個(gè)人的理解，如果你有不同理解的地方，歡迎交流討論，這樣才能碰出不一樣的花火。

回到主題，我對內(nèi)容分發(fā)的三點(diǎn)理解：

可以優(yōu)雅的包裝原生的 HTML 標(biāo)簽
組件標(biāo)簽可以嵌套，就像使用原生 HTML 標(biāo)簽一樣
讓組件更加的通用和可復(fù)用

如果沒有 <slot> 元素，當(dāng)我們在組件的標(biāo)簽中使用組件標(biāo)簽或者組件標(biāo)簽中使用 HTML 原生標(biāo)簽，都是沒有任何作用的，這個(gè)和我們以往使用和認(rèn)識的 HTML 是相違背的。

下面我們就對這三點(diǎn)去做一個(gè)詳細(xì)的闡述，先從一個(gè)張圖開始。

這個(gè)大家都見過，一個(gè)標(biāo)準(zhǔn)的 dialog 對話框，項(xiàng)目中也經(jīng)常使用到，我們把它抽出來做成一個(gè)組件如下：

<div class="dialog-panel">
 <div class="dialog-header">
  <h3 class="title">標(biāo)題</h3>
  <button class="close">x</button>
 </div>
 <div class="dialog-content">這是一個(gè)標(biāo)準(zhǔn)的 dialog 對話框</div>
 <div class="dialog-footer">
  <el-button type="primary" plain>取消</el-button>
  <el-button type="primary">確定</el-button>
 </div>
</div>

首先這個(gè)組件不夠靈活，內(nèi)容基本上是寫死的，就拿標(biāo)題來說，我們希望標(biāo)題是可以變化的，讓使用者可以傳遞標(biāo)題進(jìn)來，那么我們該如何去設(shè)計(jì)我們的這個(gè)組件呢？這就是我們今天要說的內(nèi)容分發(fā) <slot> 了，我們小小的修改下我們的例子。

<div class="dialog-panel">
 <slot></slot>
 <div class="dialog-content">這是一個(gè)標(biāo)準(zhǔn)的 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">傳遞進(jìn)來的標(biāo)題</h3>
  <button class="close">x</button>
 </div>
</dialog-panel>

你會發(fā)現(xiàn)組件渲染之后， <slot> 元素會被替換成組件中包裹的元素，標(biāo)題的內(nèi)容完全由外部傳遞進(jìn)來。

上面我們只是嵌套了一個(gè)簡單的 div 標(biāo)簽元素，插槽可以傳入任何的元素，不管是HTML，還是組件元素。

插槽的默認(rèn)內(nèi)容

不僅如此，插槽還支持默認(rèn)內(nèi)容，當(dāng)我們在外部沒有傳遞給插槽內(nèi)容時(shí)，我們可以給插槽一個(gè)默認(rèn)的顯示內(nèi)容，如果外部有內(nèi)容，默認(rèn)的內(nèi)容將會被外部的內(nèi)容替換掉。

<div class="dialog-panel">
 <slot>
  <div class="dialog-header">
    <h3 class="title">這是默認(rèn)標(biāo)題</h3>
    <button class="close">x</button>
  </div>
 </slot>
 <div class="dialog-content">這是一個(gè)標(biāo)準(zhǔn)的 dialog 對話框</div>
 <div class="dialog-footer">
  <el-button type="primary" plain>取消</el-button>
  <el-button type="primary">確定</el-button>
 </div>
</div>

在父組件中使用它，不嵌套任何的內(nèi)容時(shí)，我們的組件就會有個(gè)默認(rèn)的渲染標(biāo)題。

<dialog-panel>
  //無內(nèi)容
</dialog-panel>

如果我們在父組件中提供了內(nèi)容，默認(rèn)的內(nèi)容就會被替換。

<dialog-panel>
  <div class="dialog-header">
    <h3 class="title">我是新傳遞的標(biāo)題</h3>
    <button class="close">x</button>
  </div>
</dialog-panel>

具名插槽

有些時(shí)候，我們除了標(biāo)題有這么高的自由度之外，我們也想其它的內(nèi)容也有這樣的靈活性，讓使用者也能通過父組件傳遞進(jìn)來，Vue 中給我們提供了方法，我們一次可以使用很多插槽，然后給每一個(gè)插槽起個(gè)名字，也就是給我們的 <slot> 添加一個(gè) name 屬性。

于是我們就開始修改我們的對話框

<div class="dialog-panel">
 <slot name="header"></slot>
 <slot name="content"></slot>
 <slot name="footer"></slot>
</div>

我們在外部使用時(shí)，只需要提供相應(yīng)名稱，我們就可以渲染出我們需要的

<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">這是一個(gè)標(biāo)準(zhǔn)的 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>

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

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

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

作用域插槽

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

首先我們實(shí)現(xiàn)一個(gè)星級評價(jià)組件

<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>

這是我們寫死的一個(gè)星級評價(jià)組件，一直都用著還不錯(cuò)，可是突然有一天呢，產(chǎn)品說這個(gè)小星星用膩歪了能不能換個(gè)別的圖標(biāo)？我最近愛上了 :heart: 形

所以用這個(gè)表示吧。到這里，你可能也想到了我們把這個(gè)圖標(biāo)給抽離出來，放在外部，所以我們結(jié)合上面剛剛學(xué)到的 <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>

完成之后呢，我們再也不怕以后更換內(nèi)容的情況了，不管以后怎么換，我都可以在使用的時(shí)候直接在外部添加內(nèi)容即可，但是似乎有一些問題，因?yàn)槲覀兊拇a看起來不是很優(yōu)雅，而且我們把操作邏輯都放在的父組件中，這顯然不太友好，最好的方式肯定是我們只需要在父組件中直接調(diào)用即可，所以作用域插槽這里就起到很大的作用了，我們來看看如果使用作用域插槽是如何保持優(yōu)雅的。

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

在父組件中使用：

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

可以看到我們把操作邏輯全部都放在了組件內(nèi)部，在外部我們只需要添加需要的元素即可，簡單優(yōu)雅高復(fù)用性。

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

有些同學(xué)看到這里可能還沒有很好的理解 作用域插槽 ，那好吧我就送佛送到西，咱繼續(xù)看一個(gè)例子，我們創(chuàng)建一個(gè)列表面板組件。

<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>

我們再來給每個(gè)酒店添加一些描述標(biāo)簽，也能夠完美的展示出來。

<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: "海濱風(fēng)光"
    },{
     name: "布宜諾斯艾利斯四季酒店",
     tag: "輕奢度假"
    },{
     name: "孟買四季酒店",
     tag: "服務(wù)周到"
    },{
     name: "新加坡四季酒店",
     tag: "沙海綠洲"
    }]
  };
 }
};
</script>

畫風(fēng)一轉(zhuǎn)，下面我們把它變成一個(gè)消息通知列表，可以看到每個(gè)文章的點(diǎn)贊數(shù)量。

<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一個(gè)案例引發(fā)「動畫」的使用總結(jié)",
     value: 200
    },{
     title: "Vue一個(gè)案例引發(fā)的遞歸組件的使用",
     value: 20
    },{
     title: "Vue一個(gè)案例引發(fā)的動態(tài)組件與全局事件綁定總結(jié)",
     value: 50
    }]
  };
 }
};
</script>