詳解Vue一個案例引發(fā)「內容分發(fā)slot」的最全總結
今天我們繼續(xù)來說說 Vue，目前一直在自學 Vue 然后也開始做一個項目實戰(zhàn)，我一直認為在實戰(zhàn)中去發(fā)現(xiàn)問題然后解決問題的學習方式是最好的，所以我在學習一些 Vue 的理論之后，就開始自己利用業(yè)余時間做了一個項目，然后通過項目中的一些案例進行總結。
今天我們來說說 Vue 中的內容分發(fā) <slot> ，首先 Vue 實現(xiàn)了一套內容分發(fā)的 API，這套 API 是基于當前的 Web Components 規(guī)范草案，將 <slot> 元素作為承載內分發(fā)內容的出口，內容分發(fā)是 Vue 中一個非常重要的功能，很多第三方的框架庫都使用到了
<slot> 功能，所以掌握這個技能是非常重要的。
它可以讓我們更加優(yōu)雅的使用組件。
我對 <slot> 的理解有三點或者說優(yōu)勢，當然，這個只是我個人的理解，如果你有不同理解的地方，歡迎交流討論，這樣才能碰出不一樣的花火。
回到主題，我對內容分發(fā)的三點理解：
- 可以優(yōu)雅的包裝原生的 HTML 標簽
- 組件標簽可以嵌套，就像使用原生 HTML 標簽一樣
- 讓組件更加的通用和可復用
如果沒有 <slot> 元素，當我們在組件的標簽中使用組件標簽或者組件標簽中使用 HTML 原生標簽，都是沒有任何作用的，這個和我們以往使用和認識的 HTML 是相違背的。
下面我們就對這三點去做一個詳細的闡述，先從一個張圖開始。
這個大家都見過，一個標準的 dialog 對話框，項目中也經(jīng)常使用到，我們把它抽出來做成一個組件如下：
<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>
首先這個組件不夠靈活，內容基本上是寫死的，就拿標題來說，我們希望標題是可以變化的，讓使用者可以傳遞標題進來，那么我們該如何去設計我們的這個組件呢？這就是我們今天要說的內容分發(fā) <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>
你會發(fā)現(xiàn)組件渲染之后， <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 中是一個非常重要的一個功能，它讓組件更加的可復用性，但是官方文檔上對作用域插槽的解釋很令人蛋疼，反正我是看了幾遍不是太理解，最后通過自己寫了幾個案例才明白原來可以這么厲害，如果你也和我一樣一開始不太理解，不妨跟著我看看下面的案例或許對你的幫助很大。
首先我們實現(xiàn)一個星級評價組件
<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>
這是我們寫死的一個星級評價組件，一直都用著還不錯，可是突然有一天呢，產(chǎn)品說這個小星星用膩歪了能不能換個別的圖標？我最近愛上了 :heart: 形
所以用這個表示吧。到這里，你可能也想到了我們把這個圖標給抽離出來，放在外部，所以我們結合上面剛剛學到的 <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>
完成之后呢，我們再也不怕以后更換內容的情況了，不管以后怎么換，我都可以在使用的時候直接在外部添加內容即可，但是似乎有一些問題，因為我們的代碼看起來不是很優(yōu)雅，而且我們把操作邏輯都放在的父組件中，這顯然不太友好，最好的方式肯定是我們只需要在父組件中直接調用即可，所以作用域插槽這里就起到很大的作用了，我們來看看如果使用作用域插槽是如何保持優(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>
可以看到我們把操作邏輯全部都放在了組件內部，在外部我們只需要添加需要的元素即可，簡單優(yōu)雅高復用性。
在 Vue2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽內的任何元素或組件上
有些同學看到這里可能還沒有很好的理解 作用域插槽 ，那好吧我就送佛送到西，咱繼續(xù)看一個例子，我們創(chuàng)建一個列表面板組件。
<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>
畫風一轉，下面我們把它變成一個消息通知列表，可以看到每個文章的點贊數(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一個案例引發(fā)「動畫」的使用總結",
value: 200
},{
title: "Vue一個案例引發(fā)的遞歸組件的使用",
value: 20
},{
title: "Vue一個案例引發(fā)的動態(tài)組件與全局事件綁定總結",
value: 50
}]
};
}
};
</script>
可以看到，不管我們如何的去修改數(shù)據(jù)結構也好，添加不同的內容也罷，我們都可以完美的完成，而且不用修改我們的子組件，只需要在外部調用時填充我們需要的內容即可。
有沒有感受到作用于插槽的強大與靈活。
如果用一句話來描述作用域插槽的話：它可以讓我們在父組件中訪問子組件的數(shù)據(jù)，就像利用 props 屬性讓子組件訪問到父組件的數(shù)據(jù)一樣。
總結
插槽是一個重要且非常強大的功能，它可以讓我們的組件具有非常 的靈活性與可復用性，而作用域插槽更加的強化了這些特性。
作用域插槽是一個不太好理解的地方，希望通過本篇文章能夠讓你解惑。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
詳解Vue中的render:?h?=＞?h(App)示例代碼
這篇文章主要介紹了Vue中的render:?h?=＞?h(App),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載
學了vue寫項目這么久,忽然發(fā)現(xiàn)路由懶加載的寫法,節(jié)省了加載所有路由的時間。本文主要介紹了vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載，感興趣的可以了解一下2021-06-06
根據(jù)登錄的角色不一樣,實現(xiàn)不同的路由展示，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2024-04-04
在Vue和Django進行前后分離開發(fā)時,經(jīng)常會遇到跨域和CSRF令牌驗證問題,本文詳細介紹了如何在Django后端設置視圖獲取CSRF令牌,并在Vue前端進行配置以確保安全的數(shù)據(jù)交互,文章提供了后端視圖創(chuàng)建、settings配置以及前端axios請求封裝的具體方法2024-09-09
Vue.js中computed屬性高效的數(shù)據(jù)處理案例
computed是Vue中一個計算屬性,它可以根據(jù)依賴的數(shù)據(jù)動態(tài)計算出一個新的值,并將其緩存起來,這篇文章主要給大家介紹了關于Vue.js中computed屬性高效的數(shù)據(jù)處理的相關資料,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue?css?相對路徑導入問題級踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue出現(xiàn)did you register the component
這篇文章主要介紹了Vue出現(xiàn)did you register the component correctly?解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
頁面跳轉,我們一般都通過路由跳轉實現(xiàn),通常情況下可直接使用router-link標簽實現(xiàn)頁面跳轉,下面這篇文章主要給大家介紹了關于vue如何通過點擊事件實現(xiàn)頁面跳轉的相關資料,需要的朋友可以參考下2022-07-07
vue與bootstrap實現(xiàn)簡單用戶信息添加刪除功能
這篇文章主要為大家詳細介紹了vue與bootstrap實現(xiàn)簡單用戶信息添加刪除功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
下面小編就為大家分享一篇Vue的路由動態(tài)重定向和導航守衛(wèi)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03