Vue中slot-scope的深入理解（適合初學(xué)者）
百度上已經(jīng)有很多的關(guān)于slot-scope的文章，但我感覺都是那些以前沒學(xué)好，又回頭學(xué)的人，他們都使用了.Vue文件，我覺得有點(diǎn)不適合初學(xué)者，所以我就寫一篇適合初學(xué)者的。
先拋例程：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件之通過(guò)插槽(slot)分發(fā)內(nèi)容</title>
<script src="你的vue地址，請(qǐng)下載最新版的"></script>
<script>
Vue.component("test-slot",{
// 插槽允許有默認(rèn)內(nèi)容
template:
`<div>
<strong>Error!</strong>
<slot></slot>
</div>
`,
data:function () {
return {
name:"perry"
}
}
});
// 具名插槽
Vue.component("slot-name",{
template:
`<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot ></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
`
});
// 作用域插槽
Vue.component("todo-list",{
inheritAttrs:false,
props:{
todos:[Array,Object]
},
template:
`<ul>
<li v-for="todo in todos" :key="todo.id" style="display: block;" >
<slot :data="todo">{{todo.text}}</slot>
</li>
</ul>
`
});
</script>
<style>
li{
list-style: none;
display: inline-block;
font-size: 25px;
}
</style>
</head>
<body>
<div id="app">
<!--1、插槽內(nèi)容 slot可以接收任何內(nèi)容、代碼，包括組件-->
<test-slot>Something bad happened.你是誰(shuí)啊，我認(rèn)識(shí)你嗎</test-slot>
<test-slot>
Something bad happened.
<!--允許使用變量，但該變量必須是本作用域的才會(huì)生效，這里name的值將會(huì)是"岔道口"-->
<h3>標(biāo)題{{name}}</h3>
<img src="img/flower.jfif" alt="圖片無(wú)法顯示">
</test-slot>
<!--2、具名插槽 slo有一個(gè)特殊的屬性name,可以使插槽具名-->
<slot-name>
<h3>勸學(xué)</h3>
<p>少壯不努力，老大徒傷悲</p>
<p>光陰似箭，日月如梭</p>
<template slot="header">
<ul >
<li>主頁(yè)</li>
<li>關(guān)于時(shí)間</li>
<li>關(guān)于人生</li>
<li>關(guān)于未來(lái)</li>
</ul>
</template>
<p>你好啊</p>
<p slot="footer">
<p>結(jié)尾</p>
<p>粵ICP備6545646456415</p>
</p>
</slot-name>
<!--使用作用域插槽，通過(guò)slot-scope實(shí)現(xiàn)-->
<todo-list :todos="todos">
<template slot-scope="slotProps">
<span v-if="slotProps.data.isTrue">√</span>
{{slotProps.data.text}}
</template>
</todo-list>
<!--使用ES2015結(jié)構(gòu)語(yǔ)法-->
<todo-list :todos="todos">
<template slot-scope="{data}">
<span v-if="data.isTrue">√</span>
{{data.text}}
</template>
</todo-list>
</div>
<script>
new Vue({
el:"#app",
data:{
name:"岔道口",
todos:[
{text:"A",id:1,isTrue:true},
{text:"B",id:2,isTrue:true},
{text:"C",id:3,isTrue:false},
{text:"D",id:4,isTrue:true},
],
// slotProps:""
}
})
</script>
</body>
</html>
例程中也寫了普通插槽和具名插槽，這個(gè)我就不說(shuō)，我就說(shuō)一下作用域插槽。首先從“作用域插槽“”這個(gè)名字說(shuō)起，本來(lái)你父組件的模板是無(wú)法使用到子組件模板中的數(shù)據(jù)，官網(wǎng)中有一句特別強(qiáng)調(diào)的話：父組件模板的所有東西都會(huì)在父級(jí)作用域內(nèi)編譯；子組件模板的所有東西都會(huì)在子級(jí)作用域內(nèi)編譯。這句話其實(shí)挺難理解，舉個(gè)例子就知道了，
<test-slot>
Something bad happened.
<!--允許使用變量，但該變量必須是本作用域的才會(huì)生效，這里name的值將會(huì)是"岔道口"-->
<h3>標(biāo)題{{name}}</h3>
<img src="img/flower.jfif" alt="圖片無(wú)法顯示">
</test-slot>
這是我上面的例子，也就是說(shuō)這里name必須是當(dāng)前組件里的，不能是test-slot這個(gè)組件內(nèi)部的數(shù)據(jù)，這是它作用域限制，name這個(gè)數(shù)據(jù)屬于父組件的作用域，所以只能是父組件的數(shù)據(jù)。但是slot-scope的出現(xiàn)卻實(shí)現(xiàn)了父組件調(diào)用子組件內(nèi)部的數(shù)據(jù)，子組件的數(shù)據(jù)通過(guò)slot-scope屬性傳遞到了父組件
// 作用域插槽
Vue.component("todo-list",{
inheritAttrs:false,
props:{
todos:[Array,Object]
},
template:
`<ul>
<li v-for="todo in todos" :key="todo.id" style="display: block;" >
//這里的：data=“todo”就是講子組件todo這個(gè)數(shù)據(jù)傳給了父組件
<slot :data="todo">{{todo.text}}</slot>//todo.text是默認(rèn)值，父組件會(huì)把它覆蓋掉
</li>
</ul>
`
});
<!--使用作用域插槽，通過(guò)slot-scope實(shí)現(xiàn)-->
<todo-list :todos="todos">
<template slot-scope="slotProps">
<span v-if="slotProps.data.isTrue">√</span>
{{slotProps.data.text}}
</template>
</todo-list>
使用的時(shí)候就是這樣，從子組件傳過(guò)來(lái)的名為data值為todo的數(shù)據(jù)將會(huì)被slot-scope接收，需要注意的是，slot-scope接收的是一個(gè)對(duì)象，這里命名為slotProps，也就是說(shuō)你傳過(guò)來(lái)的data將會(huì)作為slotProps的一個(gè)屬性，所以需要slotProps.data才能調(diào)用到data。前面說(shuō)了，data的值為todo，todo是什么呢？todo是todos遍歷出來(lái)的，所以是一個(gè)對(duì)象。
new Vue({
el:"#app",
data:{
name:"岔道口",
todos:[
{text:"A",id:1,isTrue:true},
{text:"B",id:2,isTrue:true},
{text:"C",id:3,isTrue:false},
{text:"D",id:4,isTrue:true},
],
// slotProps:""
}
})；
我們已經(jīng)理解了slot-scope特性，那么他有什么運(yùn)用場(chǎng)景呢？我們可以試想一下，別人寫好了一個(gè)組件，該組件已經(jīng)封裝好了，但他覺得，數(shù)據(jù)的顯示風(fēng)格讓用戶自己定義，就像我們上面，我們希望列表的樣式由用戶定義，比如我就加了一個(gè)√號(hào)。一開始最初的數(shù)據(jù)是我們傳進(jìn)去的，但數(shù)據(jù)必須進(jìn)過(guò)子組件處理后，寫組件那個(gè)人肯定希望顯示的是處理后的數(shù)據(jù)。這時(shí)候slot-scope就無(wú)比重要了。
總結(jié)
到此這篇關(guān)于Vue中slot-scope深入理解的文章就介紹到這了,更多相關(guān)Vue slot-scope理解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3+electron12+dll開發(fā)客戶端配置詳解
本文將結(jié)合實(shí)例代碼，介紹vue3+electron12+dll客戶端配置,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
今天小編就為大家分享一篇基于vue中keep-alive緩存問題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue動(dòng)態(tài)組件與異步組件實(shí)例詳解
這篇文章主要介紹了Vue動(dòng)態(tài)組件與異步組件,結(jié)合實(shí)例形式分析了動(dòng)態(tài)組件與異步組件相關(guān)概念、功能及使用技巧,需要的朋友可以參考下2019-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)計(jì)步器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了Vue Socket.io源碼解讀，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了vue router仿天貓底部導(dǎo)航欄功能,需要的朋友可以參考下2017-10-10
vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果詳解
這篇文章主要介紹了vue和better-scroll實(shí)現(xiàn)列表左右聯(lián)動(dòng)效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
為了給Vue一個(gè)提示,以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份,從而重用和重新排序現(xiàn)有元素,你需要為每項(xiàng)提供一個(gè)唯一key屬性,下面這篇文章主要給大家介紹了關(guān)于Vue深入理解之v-for中key的真正作用,需要的朋友可以參考下2022-05-05
詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別，文中通過(guò)示例為大家進(jìn)行了詳細(xì)講解，對(duì)Vue感興趣的同學(xué)，可以學(xué)習(xí)一下2022-04-04
這篇文章主要介紹了vue嵌套組件傳參實(shí)例分享,本文以一個(gè)vue遞歸組件為例,探究多層嵌套后事件無(wú)法觸發(fā)的問題,我們可以通過(guò)查看一Demo,便于快速了解,下文列舉例子需要的小伙伴可以參考一下2022-04-04