Vue slot插槽作用與原理深入講解
前言
在2.6.0中，具名插槽 和 作用域插槽 引入了一個新的統(tǒng)一的語法 (即v-slot 指令)。它取代了 slot 和 slot-scope。
什么是Slot
當(dāng)我們生成好組件模板后，為了方便用戶在調(diào)用組件的時(shí)候自定義組件內(nèi)部分元素的樣式或內(nèi)容。于是在設(shè)計(jì)組件模板的時(shí)候會挖一個坑，等待用戶使用v-slot來替換坑的slot位置。
栗子
// father.vue
<template>
<div>
<child>
<h1>AAAA</h1>
</child>
</div>
</template><template>
<div>
<p>這里是子組件哦</p>
<slot></slot>
</div>
</template>
可以看見 <h1>AAAA</h1>被 插入到child的里面。
除了可以插入HTML模板代碼外，你也可以插入普通文本、其他組件、本組件的數(shù)據(jù)。
在插槽中使用數(shù)據(jù)
// father.vue
<template>
<div>
<child>
{{testName}}
<h1>AAAA</h1>
</child>
</div>
</template>
<script>
...
testName = 'Test101';
...
</script>
插槽可以使用當(dāng)前引用子組件的組件數(shù)據(jù)，但是不能引用傳遞給子組件的數(shù)據(jù)。
// father.vue
<template>
<div>
<child :childName="testName">
{{ childName }}
<h1>AAAA</h1>
</child>
</div>
</template>
<script>
...
testName = 'Test101';
...
</script>// child.vue
<template>
<div>
<p>這里是子組件{{ childName }}</p>
<slot></slot>
</div>
</template>
<script>
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component()
export default class AAChild extends Vue {
@Prop() childName;
}
</script>
這里是獲取不到childName的，因?yàn)檫@個值是傳給<child>的
備胎插槽
// father.vue <div> <child :childName="testName"> </child> </div>
// child.vue
<div>
<p>這里是子組件{{ childName }}</p>
<slot> 我是備胎 </slot>
</div>
給插槽設(shè)置一個具體的默認(rèn)內(nèi)容，當(dāng)別的組件沒有給你內(nèi)容的時(shí)候，那么默認(rèn)的內(nèi)容就會被渲染。如果我們提供內(nèi)容，那么默認(rèn)的插槽內(nèi)容會被我們的內(nèi)容覆蓋。
具名插槽
當(dāng)我們一個組件里需要定義多個插槽時(shí)，需要使用slot元素的特性name來定義額外的插槽。
// child.vue
<template>
<div>
<p>插槽一的位置</p>
<slot name="slot1"> </slot>
<p>------------------------</p>
<p>插槽二的位置</p>
<slot> </slot>
<p>------------------------</p>
<p>插槽三的位置</p>
<slot name="slot3"> </slot>
</div>
</template>// father.vue
<child>
<template v-slot:slot1>
<h1>slotOne</h1>
</template>
<template>
<h1>slotTwo</h1>
</template>
<template v-slot:slot3>
<h1>slotThree</h1>
</template>
</child>如果一個<slot>不帶name屬性的話，那么它的name默認(rèn)為default,可以不用v-slot去指定它。（如果你非要折騰，也可以寫name="default"）
在向具名插槽提供內(nèi)容的時(shí)候，我們可以在<template>元素上使用v-slot指令，并以參數(shù)的形式提供其名稱。
注：v-slot只能添加在一個<template>上，(只有一種例外情況，下面會說)
覆蓋問題
當(dāng)存在同名的v-slot的時(shí)候，后面會覆蓋前面的。
當(dāng)存在兩個匿名的插槽的時(shí)候，兩者都會被丟進(jìn)去默認(rèn)插槽里。
只更改了father.vue
// father.vue
<child>
<template v-slot:slot1>
<h1>slotOne</h1>
</template>
<template> <h1>slotTwo</h1> </template>
<template v-slot:slot3> <h1>slotThree</h1> </template>
<template v-slot:slot3> <h1>slotThreeAAAAAAAAA</h1> </template>
<template> <h1>slotTwoAAAAAAAAAAAA</h1> </template>
</child>
作用域插槽
插槽跟模板其他地方一樣都可以訪問當(dāng)前father組件的作用域而不能訪問<child>的作用域
如果要訪問child的作用域該怎么辦呢？
// child.vue
<template>
<div>
<p>下面有一個插槽</p>
<slot :aName="name"></slot>
</div>
</template>
<script>
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component()
export default class AAChild extends Vue {
name = '123';
}
</script>// father.vue
<template>
<div>
<child>
<template v-slot:default="slotProps">
<h1>{{ slotProps.aName }}</h1>
</template>
</child>
</div>
</template>
v-slot:default="slotProps"接住了child組件里在slot元素上綁定的作用域?qū)傩?，同時(shí)吧template只想了默認(rèn)插槽。
具名插槽的作用域
// father.vue
<template>
<div>
<child>
<template v-slot:default="slotProps">
<h1>{{ slotProps.aName }}</h1>
</template>
<template v-slot:slotA="slotProps">
<h1>{{ slotProps.nameA }}</h1>
</template>
</child>
</div>
</template>// child.vue
<template>
<div>
<p>下面有一個插槽</p>
<slot :aName="name"></slot>
<slot :nameA="nameA" name="slotA"></slot>
</div>
</template>
<script>
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component()
export default class AAChild extends Vue {
name = '123';
nameA = '321';
}
</script>
過時(shí)的寫法：
<template slot="custom" slot-scope="item"></template >
現(xiàn)在的寫法：
<template v-slot:custom="{item}"></template >解構(gòu)插槽Prop
v-slot 的值實(shí)際上可以是任何能夠作為函數(shù)定義中的參數(shù)的 JS 表達(dá)式(作用域插槽 的內(nèi)部工作原理是將你的插槽內(nèi)容包括在一個傳入單個參數(shù)的函數(shù)里)
// child.vue
<template>
<div>
<p>下面有一個插槽</p>
<slot :nameData="nameObj"></slot>
</div>
</template>
<script>
import { Component, Vue, Prop } from 'vue-property-decorator';
@Component()
export default class AAChild extends Vue {
nameObj = {
name: '插槽君',
key: '202203241567',
};
}
</script>// father.vue
<template>
<div>
<child>
<template v-slot="slotProps">
<h1>{{ slotProps.nameData.name }}</h1>
</template>
</child>
</div>
</template>father,vue可以改寫為
// father.vue
<template>
<div>
<child>
<template v-slot="{ nameData }">
<h1>{{ nameData.name }}</h1>
</template>
</child>
</div>
</template>這樣可以使模板更簡潔。
具名插槽的縮寫
跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符 #。例如 v-slot:header 可以被重寫為 #header：
// father.vue
<template>
<div>
<child>
<template v-slot:keyDDD="{ nameData }">
<h1>{{ nameData.name }}</h1>
</template>
</child>
</div>
</template>等同于
// father.vue
<template>
<div>
<child>
<template #keyDDD="{ nameData }">
<h1>{{ nameData.name }}</h1>
</template>
</child>
</div>
</template>$scopedSlots
和slot-scope 的區(qū)別？
- 作用相同：都是作用域插槽
- 場景不同：slot-scope 是模板語法，scopedSlots 則是編程式語法
- 使用不同：在 <template> 中使用 slot-scope，在 render() 函數(shù)中使用 scopedSlots
<template v-if="$scopedSlots.label" v-slot:title="{ data }">
<slot name="label" :data="data" > </slot>
</template>或者
render() {
return this.$scopedSlots.default
? this.$scopedSlots.default(this.title)
: null;
}到此這篇關(guān)于Vue slot插槽作用與原理深入講解的文章就介紹到這了,更多相關(guān)Vue slot插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue2項(xiàng)目中Mock.js的完整集成與使用教程
Mock.js 是一個可以在開發(fā)階段模擬后端數(shù)據(jù)接口的 JavaScript 庫,它能夠生成大量不同類型的隨機(jī)數(shù)據(jù),并且模擬真實(shí)的接口返回,允許前端開發(fā)在沒有真實(shí)后端接口的情況下進(jìn)行開發(fā),本文給大家介紹了Vue2項(xiàng)目中Mock.js的完整集成與使用教程,需要的朋友可以參考下2025-02-02
這篇文章主要介紹了基于iview的router常用控制方式,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
vue實(shí)現(xiàn)一個矩形標(biāo)記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實(shí)現(xiàn)一個矩形標(biāo)記區(qū)域 rectangle marker的方法，幫助大家實(shí)現(xiàn)區(qū)域標(biāo)記功能，感興趣的朋友可以了解下2020-10-10
模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的。接下來通過本文給大家介紹vue中的計(jì)算屬性,需要的朋友可以參考下2018-09-09
在 Vue 中，如果直接對數(shù)組進(jìn)行操作，比如使用下標(biāo)直接修改元素，數(shù)組長度不變時(shí)， Vue 是無法監(jiān)測到這種變化的，導(dǎo)致無法觸發(fā)視圖更新。針對該問題本文為大家整理了一些方法，需要的可以參考一下2023-01-01
vue中axios的封裝問題(簡易版攔截,get,post)
這篇文章主要介紹了vue中axios的封裝問題(簡易版攔截,get,post),需要的朋友可以參考下2018-06-06
下面小編就為大家分享一篇axios post提交formdata的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
VUE頁面中通過雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容的示例代碼
這篇文章主要介紹了VUE頁面中通過雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
虛擬列表用來解決大數(shù)據(jù)量數(shù)據(jù)渲染問題,由于一次性渲染性能低,所以誕生了虛擬列表渲染,下面我們就來學(xué)習(xí)一下不同場景下Vue中虛擬列表是如何實(shí)現(xiàn)的吧2023-10-10
vue中如何使用lodash的debounce防抖函數(shù)
防抖函數(shù) debounce 指的是某個函數(shù)在某段時(shí)間內(nèi),無論觸發(fā)了多少次回調(diào),都只執(zhí)行最后一次,在Vue中使用防抖函數(shù)可以避免在頻繁觸發(fā)的事件中重復(fù)執(zhí)行操作,這篇文章主要介紹了vue中使用lodash的debounce防抖函數(shù),需要的朋友可以參考下2024-01-01