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

来源:https://www.cnblogs.com/beevesnoodles/archive/2018/12/01/10050501.html
-Advertisement-
Play Games

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


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

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

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

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

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

  1. 可以優雅的包裝原生的 HTML 標簽
  2. 組件標簽可以嵌套，就像使用原生 HTML 標簽一樣
  3. 讓組件更加的通用和可復用

如果沒有 <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>了，我們小小的修改下我們的例子。

<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> 元素會被替換成組件中包裹的元素，標題的內容完全由外部傳遞進來。

上面我們只是嵌套了一個簡單的 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 屬性讓子組件訪問到父組件的數據一樣。

總結

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

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

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Hadoop系列002-從Hadoop框架討論大數據生態
    本人微信公眾號，歡迎掃碼關註！ 從Hadoop框架討論大數據生態 1、Hadoop是什麼 1）Hadoop是一個由Apache基金會所開發的分散式系統基礎架構 2）主要解決，海量數據的存儲和海量數據的分析計算問題。 3）廣義上來說，HADOOP通常是指一個更廣泛的概念——HADOOP生態圈 2、Ha ...
  • Hadoop系列001-大數據概論
    本人微信公眾號，歡迎掃碼關註！ 大數據概論 1、大數據概念 大數據（big data），指無法在一定時間範圍內用常規軟體工具進行捕捉、管理和處理的數據集合，是需要新處理模式才能具有更強的決策力、洞察發現力和流程優化能力的海量、高增長率和多樣化的信息資產。 最小的基本單位是bit，按順序給出所有單位： ...
  • ORACLEserver實例DB的概念學習理解與總結
    ORACLEserver實例DB的概念學習理解與總結，邊學習邊總結 ...
  • android.database.sqlite.SQLiteException: no such column: aaa (code 1): , while compiling: DELETE FROM users WHERE user_name=aaa解決辦法
    在寫安卓登錄註冊時註銷按鈕閃退發現： 這是因為此處錯誤： 因為用戶名為字元串，不是整型，資料庫查詢要引號，少了引號查詢不了，導致閃退 解決後成功運行 正確用法： 下次謹記，細節決定成敗呀！ ...
  • 圖片橫向等高瀑布流，每行占滿，限制行數 的實現
    圖片的橫向瀑布流，其實簡單地按順序排列就可以了 但要實現每行中各圖片都等高（各行不一定等高，但每行裡面等高），且每行都占滿，就需要用到flex的特性了 控制每行圖片高度都一致，可能會影響圖片的比例，所以不能簡單暴力地設置高度，需要按比例來動態計算 另外，如要限製圖片展示的行數，則只需判斷好每行總高度 ...
  • 使用mpvue搭建一個初始小程式
    1. 初始化一個 mpvue 項目 現代前端開發框架和環境都是需要 Node.js 的，如果沒有的話，請先下載 nodejs 並安裝。 然後打開命令行工具： 隨著運行成功的回顯之後，可以看到本地多了個 dist 目錄，這個目錄里就是生成的小程式相關代碼。 2. 搭建小程式的開發環境 小程式自己有一個 ...
  • jQuery day02
    選擇器 id選擇器 $("#") $("#btn").click(function(){ this.value = "123"; $(this).val("345"); }); 標簽選擇器 $("XX") $(function(){ $("p").text("en"); }); .text()方法 ... ...
  • 彈窗查看內容時 內容滾動區域設置為body區
    看到渣浪的查看文章或者查看大圖有個效果：彈窗查看內容時，如果內容過長有滾動條，則滾動條會被放到body區滾動 什麼意思呢？ 看個圖片，一般正常彈窗是有寬高限制的，如果內容過長則直接在彈窗中進行滾動 點我預覽 將滾動位置放到整個body中，讓彈窗中內容自適應高度 這麼做的好處自然很明顯，body區域有 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類