Vue slot-scope的理解（適合初學者）
百度上已經有不少的關於slot-scope的文章，但我感受都是那些之前沒學好，又回頭學的人，他們都使用了.Vue文件，我以爲有點不適合初學者，因此我就寫一篇適合初學者的。html
先拋例程：vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件之經過插槽(slot)分發內容</title>
<script src="你的vue地址，請下載最新版的"></script>
<script>
Vue.component("test-slot",{
// 插槽容許有默認內容
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">
<!--一、插槽內容 slot能夠接收任何內容、代碼，包括組件-->
<test-slot>Something bad happened.你是誰啊，我認識你嗎</test-slot>
<test-slot>
Something bad happened.
<!--容許使用變量，但該變量必須是本做用域的纔會生效，這裏name的值將會是"岔道口"-->
<h3>標題{{name}}</h3>
<img src="img/flower.jfif" alt="圖片沒法顯示">
</test-slot>
<!--二、具名插槽 slo有一個特殊的屬性name,可使插槽具名-->
<slot-name>
<h3>勸學</h3>
<p>少壯不努力，老大徒傷悲</p>
<p>光陰似箭，日月如梭</p>
<template slot="header">
<ul >
<li>主頁</li>
<li>關於時間</li>
<li>關於人生</li>
<li>關於將來</li>
</ul>
</template>
<p>你好啊</p>
<p slot="footer">
<p>結尾</p>
<p>粵ICP備6545646456415</p>
</p>
</slot-name>
<!--使用做用域插槽，經過slot-scope實現-->
<todo-list :todos="todos">
<template slot-scope="slotProps">
<span v-if="slotProps.data.isTrue">√</span>
{{slotProps.data.text}}
</template>
</todo-list>
<!--使用ES2015結構語法-->
<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>
例程中也寫了普通插槽和具名插槽，這個我就不說，我就說一下做用域插槽。首先從「做用域插槽「」這個名字提及，原本你父組件的模板是沒法使用到子組件模板中的數據，官網中有一句特別強調的話：父組件模板的全部東西都會在父級做用域內編譯；子組件模板的全部東西都會在子級做用域內編譯。這句話其實挺難理解，舉個例子就知道了，app
<test-slot>spa
Something bad happened..net
<!--容許使用變量，但該變量必須是本做用域的纔會生效，這裏name的值將會是"岔道口"-->component
<h3>標題{{name}}</h3>htm
<img src="img/flower.jfif" alt="圖片沒法顯示">對象
</test-slot>blog
這是我上面的例子，也就是說這裏name必須是當前組件裏的，不能是test-slot這個組件內部的數據，這是它做用域限制，name這個數據屬於父組件的做用域，因此只能是父組件的數據。可是slot-scope的出現卻實現了父組件調用子組件內部的數據，子組件的數據經過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這個數據傳給了父組件
<slot :data="todo">{{todo.text}}</slot>//todo.text是默認值，父組件會把它覆蓋掉
</li>
</ul>
`
});
<!--使用做用域插槽，經過slot-scope實現-->
<todo-list :todos="todos">
<template slot-scope="slotProps">
<span v-if="slotProps.data.isTrue">√</span>
{{slotProps.data.text}}
</template>
</todo-list>
使用的時候就是這樣，從子組件傳過來的名爲data值爲todo的數據將會被slot-scope接收，須要注意的是，slot-scope接收的是一個對象，這裏命名爲slotProps，也就是說你傳過來的data將會做爲slotProps的一個屬性，因此須要slotProps.data才能調用到data。前面說了，data的值爲todo，todo是什麼呢？todo是todos遍歷出來的，因此是一個對象。
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:"" }})； 咱們已經理解了slot-scope特性，那麼他有什麼運用場景呢？咱們能夠試想一下，別人寫好了一個組件，該組件已經封裝好了，但他以爲，數據的顯示風格讓用戶本身定義，就像咱們上面，咱們但願列表的樣式由用戶定義，好比我就加了一個√號。一開始最初的數據是咱們傳進去的，但數據必須進過子組件處理後，寫組件那我的確定但願顯示的是處理後的數據。這時候slot-scope就無比重要了。————————————————版權聲明：本文爲CSDN博主「perryhuan9」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/huangyilinnuli/article/details/81239077
- 1. 適合初學者學習的vue
- 2. Vue slot-scope的理解（適合初學者）
- 3. 適合初學者的TCP講解
- 4. Spring MVC詳解(適合Spring初學者)
- 5. 適合初學者的理解Sphinx運行方式
- 6. 適合初學者對微服務的理解（重在概念）
- 7. 卷積的淺顯理解，適合初學者
- 8. 適合ionic初學者的小項目
- 9. 適合初學者的 Python IDE Thonny
- 10. 適合初學者的反射代碼
- 更多相關文章...
- • MyBatis的工作原理 - MyBatis教程
- • ARP協議的工作機制詳解 - TCP/IP教程
- • 適用於PHP初學者的學習線路和建議
- • Docker 清理命令
-
每一个你不满意的现在，都有一个你没有努力的曾经。