詳解vue2.6插槽更新v-slot用法總結(jié)
在 2.6.0 中,我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱 RFC。
之前做項目時,對插槽理解太少了,這兩天學(xué)習(xí)時,才發(fā)現(xiàn)插槽更新用v-slot了,自己做了些簡單總結(jié),與大家分享一下~
插槽
我的理解就是父頁面在組件標(biāo)簽內(nèi)插入任意內(nèi)容,子組件內(nèi)插糟slot控制擺放位置(匿名插槽,具名插槽)
插槽分類
插槽一共就三大類
1.匿名插槽(也叫默認(rèn)插槽): 沒有命名,有且只有一個
2.具名插槽: 相對匿名插槽組件slot標(biāo)簽帶name命名的
3.作用域插槽: 子組件內(nèi)數(shù)據(jù)可以被父頁面拿到(解決了數(shù)據(jù)只能從父頁面?zhèn)鬟f給子組件)
匿名插槽(也叫默認(rèn)插槽default)
用法:我的理解,匿名插糟只需要一個.(就是這些,不太復(fù)雜)
父頁面:
<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對應(yīng),可以有多個具名插槽.(沒了~)
父頁面
<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)容 // 我是匿名插槽
對 v-slot:todo 做操作:
動態(tài)命名
v-slot:{dynamicSlotName}//替換標(biāo)簽上 v-slot:todo
具名插槽縮寫(匿名插槽用法)(可以后看)
#todo 替換標(biāo)簽上 v-slot:todo
匿名如果想用必須加上default
#default 替換標(biāo)簽上 v-slot:todo
父級模板里的所有內(nèi)容都是在父級作用域中編譯的;子模板里的所有內(nèi)容都是在子作用域中編譯的。
作用域插槽
1.重點是slotProps接取子組件里:user="user" :test="test"類似屬性的數(shù)據(jù)
父頁面
<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)父頁面沒有(="slotProps") // 時顯示 Zhang ## 顯示 ## // yue
解構(gòu)插槽Prop
父頁面 (子組件不變 顯示一樣)
// 相當(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
獨占默認(rèn)插槽縮寫(可以后看)
感覺沒什么機會用,限制條件太多
總結(jié)
在用上v-slot之后 只需要考慮好
1.是否需要命名(匿名插槽,具名插槽)
2.父頁面是否需要取存在子頁面的數(shù)據(jù)(作用域插槽)
todo-list實例
可以試一下,便于理解~
父頁面
<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)槊總€ todo 準(zhǔn)備了一個插槽, 將 `todo(todoList里的)` 對象作為一個插槽的 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue?2源碼解析ParseHTML函數(shù)HTML模板
這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08vue+element開發(fā)使用el-select不能回顯的處理方案
這篇文章主要介紹了vue+element開發(fā)使用el-select不能回顯的處理方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07