在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。新語(yǔ)法的由來(lái)可查閱 RFC。
引vue官方文檔
之前做項(xiàng)目時(shí),對(duì)插槽理解太少了,這兩天學(xué)習(xí)時(shí),才發(fā)現(xiàn)插槽更新用v-slot了,自己做了些簡(jiǎn)單總結(jié),與大家分享一下~
插槽
我的理解就是
父頁(yè)面在組件標(biāo)簽內(nèi)插入任意內(nèi)容,子組件內(nèi)插糟slot控制擺放位置
(匿名插槽,具名插槽)
插槽分類
插槽一共就三大類
1.匿名插槽(也叫默認(rèn)插槽): 沒有命名,有且只有一個(gè)
2.具名插槽: 相對(duì)匿名插槽組件slot標(biāo)簽帶name命名的
3.作用域插槽: 子組件內(nèi)數(shù)據(jù)可以被父頁(yè)面拿到(解決了數(shù)據(jù)只能從父頁(yè)面?zhèn)鬟f給子組件)
匿名插槽(也叫默認(rèn)插槽default)
用法:我的理解,匿名插糟只需要一個(gè).(就是這些,不太復(fù)雜)
父頁(yè)面:
<todo-list>
<template v-slot:default>
任意內(nèi)容
<p>我是匿名插槽 </p>
</template>
</todo-list>
//v-slot:default寫上感覺和具名寫法比較統(tǒng)一,容易理解,也可以不用寫
子組件 todoList.vue
<slot>我是默認(rèn)值</slot>
##顯示##
// 任意內(nèi)容
// 我是匿名插槽
具名插槽(name)
用法:我的理解,和匿名插槽比較,就是必須起名todo對(duì)應(yīng),可以有多個(gè)具名插槽.(沒了~)
父頁(yè)面
<todo-list>
<template v-slot:todo>
任意內(nèi)容
<p>我是匿名插槽 </p>
</template>
</todo-list>
// todo
data() {
return {
dynamicSlotName:"todo"
}
},
子組件
<slot name="todo">我是默認(rèn)值</slot>
##顯示##
// 任意內(nèi)容
// 我是匿名插槽
對(duì) v-slot:todo 做操作:
動(dòng)態(tài)命名
v-slot:{dynamicSlotName}//替換標(biāo)簽上 v-slot:todo
具名插槽縮寫(匿名插槽用法)(可以后看)
#todo 替換標(biāo)簽上 v-slot:todo
匿名如果想用必須加上default
#default 替換標(biāo)簽上 v-slot:todo
父級(jí)模板里的所有內(nèi)容都是在父級(jí)作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。
作用域插槽
1.重點(diǎn)是slotProps接取子組件里:user="user" :test="test"類似屬性的數(shù)據(jù)
父頁(yè)面
<todo-list>
<template v-slot:todo="slotProps" >
{{slotProps.user.firstName}}
</template>
</todo-list>
//slotProps 可以隨意命名
//slotProps 接取的是子組件標(biāo)簽slot上屬性數(shù)據(jù)的集合所有v-bind:user="user"
子組件
<slot name="todo" :user="user" :test="test">
{{ user.lastName }}
</slot>
data() {
return {
user:{
lastName:"Zhang",
firstName:"yue"
},
test:[1,2,3,4]
}
},
// {{ user.lastName }}是默認(rèn)數(shù)據(jù) v-slot:todo 當(dāng)父頁(yè)面沒有(="slotProps")
// 時(shí)顯示 Zhang
## 顯示 ##
// yue
解構(gòu)插槽Prop
父頁(yè)面 (子組件不變 顯示一樣)
// 相當(dāng)于
function (slotProps) {
// 插槽內(nèi)容
}
(slotProps)=>參數(shù)可以用slot標(biāo)簽上現(xiàn)有的值({user,test})替換
<todo-list>
<template v-slot:todo="{user,test}
" >
{{user.firstName}}
</template>
</todo-list>
## 顯示 ##
## // yue
參數(shù)值替換名字(可以后看)
<todo-list>
<template v-slot:todo="{user:person,test}
" >
{{person.firstName}}
</template>
</todo-list>
// v-slot:[dynamicSlotName]="{user:person,test}
## 顯示 ##
## // yue
獨(dú)占默認(rèn)插槽縮寫(可以后看)
感覺沒什么機(jī)會(huì)用,限制條件太多
總結(jié)
在用上v-slot之后 只需要考慮好
1.是否需要命名(匿名插槽,具名插槽)
2.父頁(yè)面是否需要取存在子頁(yè)面的數(shù)據(jù)(作用域插槽)
todo-list實(shí)例
可以試一下,便于理解~
父頁(yè)面
<template>
<div>
新插槽 v-slot 代替具名插槽 作用于插槽
<todo-list
>
<template #todo="{todos:list}">
<div @click = type(todos.id)>
{{list.text}}
</div>
</template>
</todo-list>
</div >
</template>
<script>
import todoList from "@/components/component/slotTodoChildren";
export default {
name:"vSlot",
components:{
todoList
},
data() {
return {
}
},
methods: {
type(data){
console.log(data)
}
},
}
</script>
子組件
<template>
<ul class="slotTodoChildren">
<li class="lis"
v-for="todo in todoList"
v-bind:key="todo.id"
>
<!--
我們?yōu)槊總€(gè) todo 準(zhǔn)備了一個(gè)插槽，
將 `todo(todoList里的)` 對(duì)象作為一個(gè)插槽的 prop 傳入。
-->
<slot name="todo" :todos="todo">
<!-- 后備內(nèi)容 -->
{{ todo.text }}
</slot>
</li>
</ul>
</template>
<script>
export default {
name:"slotChildren",
data() {
return {
todoList:[
{
id:1,
text:"掃地"
},
{
id:2,
text:"做飯"
},
{
id:3,
text:"擦桌子"
}
]
}
},
created(){
console.log(this.filteredTodos)
}
}
</script>
<style scoped>
.slotTodoChildren .lis{
display: block;
background: #434534;
line-height:40px;
margin-top: 10px;
color: #fff;
font-size: 24px;
height: 40px;
}
</style>
