vue具名插槽的基本使用實(shí)例
更新時(shí)間：2021年05月23日 12:44:44 作者：yh8899abc
Vue 中的插槽在開發(fā)組件的過程中其實(shí)是非常重要并且好用的。下面這篇文章主要給大家介紹了關(guān)于vue具名插槽基本使用的相關(guān)資料，需要的朋友可以參考下
前言
具有名字的插槽slot使用 中的 "name" 屬性綁定元素
注意：
1，如果沒有匹配到 則放到匿名的插槽中
2，具名插槽的渲染順序，完全取決于模板，而不是取決于父組件中元素的順序
vue的匿名插槽（默認(rèn)插槽）
父組件
<div> <myslot>我是剛剛</myslot> </div>
子組件
<div> <slot><slot> </div>
vue的具名插槽
父組件
<div> <myslot> <template #one>豬豬是一只大肥貓</template> <template #two>通通是一個(gè)大屁眼子</template> <template #three>咪咪是沒心沒肺的小混蛋</template> 我是剛剛 </myslot> </div>
子組件
<div> <slot name="one"></slot> <slot><slot> <slot name="two"></slot> <slot name="three"></slot> </div>
渲染出來（大致順序）即為
vue的作用域插槽
大白話解釋作用域插槽：父組件可以通過插槽讀到子組件對應(yīng)插槽所帶的數(shù)據(jù)
父組件
<div>
<myslot>
<template #oneData="oneData">
<div>{{oneData.one.message}}</div>
</template>
<template #two>通通是一個(gè)大屁眼子</template>
<template #three>咪咪是沒心沒肺的小混蛋</template>
我是剛剛
</myslot>
</div>
子組件
<div>
<slot name="one" :data='one'></slot>
<slot><slot>
<slot name="two"></slot>
<slot name="three"></slot>
</div>
<script>
export default {
data() {
return {
one: {
message: '這是子組件所帶的數(shù)據(jù)message',
},
};
},
}
</script>
代碼優(yōu)化
<div>
<myslot>
<template #oneData="{oneData}">
<div>{{oneData.message}}</div>
</template>
<template #two>通通是一個(gè)大屁眼子</template>
<template #three>咪咪是沒心沒肺的小混蛋</template>
我是剛剛
</myslot>
</div>
子組件
<div>
<slot name="one" :oneData='one'></slot>
<slot><slot>
<slot name="two"></slot>
<slot name="three"></slot>
</div>
<script>
export default {
data() {
return {
one: {
message: '這是子組件所帶的數(shù)據(jù)message',
},
};
},
}
</script>
總結(jié)
到此這篇關(guān)于vue具名插槽基本使用的文章就介紹到這了,更多相關(guān)vue具名插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3安裝vant實(shí)現(xiàn)按需引入和全局引入
本文主要介紹了vue3安裝vant實(shí)現(xiàn)按需引入和全局引入，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue3系列之effect和ReactiveEffect?track?trigger源碼解析
這篇文章主要為大家介紹了Vue3系列之effect和ReactiveEffect?track?trigger源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
vue-router中scrollBehavior的巧妙用法
本文給大家介紹vue-router中scrollBehavior的妙用,文中給大家提到了兩種解決方案，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue cli4環(huán)境變量和模式示例詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue使用webSocket更新實(shí)時(shí)天氣的方法
本文將結(jié)合實(shí)例代碼，介紹vue使用webSocket更新實(shí)時(shí)天氣的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue中引用swiper輪播插件的方法,在需要使用swiper的組件里引入swiper，swiper的初始化放在mounted里。具體實(shí)例代碼大家跟隨腳本之家小編一起看看吧2018-08-08
Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例
這篇文章主要介紹了Vue循環(huán)中多個(gè)input綁定指定v-model實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
數(shù)據(jù)綁定的一個(gè)常見需求場景是操縱元素的 CSS class 列表和內(nèi)聯(lián)樣式,因?yàn)?nbsp;class 和 style 都是 attribute,我們可以和其他 attribute 一樣使用 v-bind 將它們和動(dòng)態(tài)的字符串綁定,這篇文章主要介紹了vue3 Class 與 Style 綁定操作方法,需要的朋友可以參考下2024-05-05
本文主要介紹了el-tree文字顯示不全的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08