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

時間 2019-12-10

標籤 vue 一個案例引起內容分發 slot 總結简体版

原文原文鏈接

今天咱們繼續來講說 Vue，目前一直在自學 Vue 而後也開始作一個項目實戰，我一直認爲在實戰中去發現問題而後解決問題的學習方式是最好的，因此我在學習一些 Vue 的理論以後，就開始本身利用業餘時間作了一個項目，而後經過項目中的一些案例進行總結。javascript

今天咱們來講說 Vue 中的內容分發 <slot>，首先 Vue 實現了一套內容分發的 API，這套 API 是基於當前的 Web Components 規範草案，將 <slot> 元素做爲承載內分發內容的出口，內容分發是 Vue 中一個很是重要的功能，不少第三方的框架庫都使用到了
<slot> 功能，因此掌握這個技能是很是重要的。java

它可讓咱們更加優雅的使用組件。微信

我對 <slot> 的理解有三點或者說優點，固然，這個只是我我的的理解，若是你有不一樣理解的地方，歡迎交流討論，這樣才能碰出不同的花火。數據結構

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

能夠優雅的包裝原生的 HTML 標籤
組件標籤能夠嵌套，就像使用原生 HTML 標籤同樣
讓組件更加的通用和可複用

若是沒有 <slot> 元素，當咱們在組件的標籤中使用組件標籤或者組件標籤中使用 HTML 原生標籤，都是沒有任何做用的，這個和咱們以往使用和認識的 HTML 是相違背的。框架

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

這個你們都見過，一個標準的 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>了，咱們小小的修改下咱們的例子。ui

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

在父組件中使用它this

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

你會發現組件渲染以後，<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>

若是咱們在父組件中提供了內容，默認的內容就會被替換。

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

具名插槽

有些時候，咱們除了標題有這麼高的自由度以外，咱們也想其它的內容也有這樣的靈活性，讓使用者也能經過父組件傳遞進來，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 中還給我提供了一種叫 做用域插槽 的用法，它讓咱們的組件更加的複用性。

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

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

做用域插槽

做用域插槽在 Vue 中是一個很是重要的一個功能，它讓組件更加的可複用性，可是官方文檔上對做用域插槽的解釋很使人蛋疼，反正我是看了幾遍不是太理解，最後經過本身寫了幾個案例才明白原來能夠這麼厲害，若是你也和我同樣一開始不太理解，不妨跟着我看看下面的案例或許對你的幫助很大。

首先咱們實現一個星級評價組件

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

咱們再來給每一個酒店添加一些描述標籤，也可以完美的展現出來。

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

畫風一轉，下面咱們把它變成一個消息通知列表，能夠看到每一個文章的點贊數量。

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

能夠看到，無論咱們如何的去修改數據結構也好，添加不一樣的內容也罷，咱們均可以完美的完成，並且不用修改咱們的子組件，只須要在外部調用時填充咱們須要的內容便可。

有沒有感覺到做用於插槽的強大與靈活。

若是用一句話來描述做用域插槽的話：它可讓咱們在父組件中訪問子組件的數據，就像利用 props 屬性讓子組件訪問到父組件的數據同樣。

總結

插槽是一個重要且很是強大的功能，它可讓咱們的組件具備很是的靈活性與可複用性，而做用域插槽更加的強化了這些特性。

做用域插槽是一個不太好理解的地方，但願經過本篇文章可以讓你解惑。

若是你以爲本文對你有幫助，歡迎轉發，點贊，不足之處歡迎指正!

關注個人微信公衆號：六小登登，更多幹貨文章，歡迎一塊兒交流。人人均可以成爲高手。我是一個會技術，又寫乾貨的碼農。歡迎勾搭。

相關標籤/搜索

slot

最後的總結