vue作用域插槽詳解、slot、v-slot、slot-scope
vue 插槽slot和具名插槽
作用都是在調(diào)用組件的時(shí)候傳遞一些DOM結(jié)構(gòu)進(jìn)去，
不同點(diǎn)是：具名插槽在傳遞DOM時(shí)需要聲明，傳遞給哪個(gè)slot的名字 name
他們用法簡單不在贅述。
重點(diǎn)說一下作用域插槽 slot-scope 的使用，以及vue2.6.X開始的新語法v-slot
作用域插槽的核心作用是
子組件給父組件傳遞數(shù)據(jù),當(dāng)然也包含上述插槽的能力
老版作用域插槽，
slot="test"： 指定插槽的名字用prop：可以隨便定義，表示子組件傳遞過來的值得對象，可以用解構(gòu)復(fù)制 { row, index }接受
<template slot="test" slot-scope="prop">
{{ prop.wife.a }}
</template>
新版是這樣的，可以說語法更加清晰
v-slot指令直接跟上插槽名稱，prop同上
<template v-slot:test="prop">
{{ prop.wife.b }}
</template>
實(shí)例說明
子組件
這里我定義了多個(gè)具名插槽，并且用父組件傳過來的數(shù)據(jù)嘗試傳遞回去
<template>
<div>
<slot :user="user">
<!-- 默認(rèn)顯示的值，當(dāng)父組件使用次作用域插槽時(shí)，會被覆蓋 -->
{{ user.age }}
</slot>
<slot name="test" :wife='wife'>
{{wife.a}}
</slot>
<slot name="hasProps" :baseData='baseData'>
{{baseData.a_count}}
</slot>
</div>
</template>
<script>
export default {
props: {
baseData: {
type: Object,
default: () => {
return {
a_count: 0,
b_count: 0,
c_count: 0,
d_count: 0,
e_count: 0,
order_amount: 0,
order_num: 0,
resource_num: 0
}
}
}
},
data () {
return {
user: {
name: '張三',
age: 20
},
wife: {
a: '小李',
b: '小韓'
}
}
}
}
</script>
父組件
部分代碼：
其中的baseData，為服務(wù)端異步返回?cái)?shù)據(jù)
<div>
<child>
<template v-slot:default="prop">
{{ prop.user.age }}
</template>
<template v-slot:test="prop">
{{ prop.wife.b }}
</template>
</child>
<child>
<template slot-scope="prop">
{{ prop.user.name }}
</template>
<template slot="test" slot-scope="prop">
{{ prop.wife.a }}
</template>
</child>
<!-- 嘗試解構(gòu)賦值 -->
<child :baseData='baseData'>
<template v-slot:hasProps="{baseData}">
{{ baseData.a_count }}
</template>
</child>
</div>
效果圖
這兩種是先注釋掉所有child里面，所有代碼的效果，前為接口返回前
這兩張是不注釋，前后圖
可以看出，
在vue2.6以上兩種模式都支持，不過官方說3.0就只支持v-slot指令了，
不使用作用域插槽就會顯示默認(rèn)的值，使用之后就按父組件的來
可以先動(dòng)態(tài)更新數(shù)據(jù)。
使用過element-ui的同學(xué)，只要用過表格，我想現(xiàn)在應(yīng)該明白作用域插槽有多大的用處了吧
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
V部落是一個(gè)多用戶博客管理平臺。這篇文章主要介紹了Vue+SpringBoot開發(fā)V部落博客管理平臺,需要的朋友可以參考下2017-12-12
使用vue-cli webpack 快速搭建項(xiàng)目的代碼
這篇文章主要介紹了vue-cli webpack 快速搭建項(xiàng)目的教程詳解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue做移動(dòng)端適配最佳解決方案(親測有效)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
vue如何通過router-link或者button跳轉(zhuǎn)到一個(gè)新的頁面
這篇文章主要介紹了vue如何通過router-link或者button跳轉(zhuǎn)到一個(gè)新的頁面，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解讓sublime text3支持Vue語法高亮顯示的示例
本篇文章主要介紹了讓sublime text3支持Vue語法高亮顯示的示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09
隨著應(yīng)用的增長，靜態(tài)類型系統(tǒng)可以幫助防止許多潛在的運(yùn)行時(shí)錯(cuò)誤，這就是為什么Vue 3是用TypeScript編寫的，本文給大家介紹Vue?3.0如何配置TypeScript支持，感興趣的朋友一起看看吧2023-12-12
本篇文章主要介紹了詳解Vue 非父子組件通信方法（非Vuex），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
vue路由跳轉(zhuǎn)到新頁面實(shí)現(xiàn)置頂
這篇文章主要介紹了vue路由跳轉(zhuǎn)到新頁面實(shí)現(xiàn)置頂問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vscode自定義vue模板的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web在線聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06