vue作用域插槽詳解、slot、v-slot、slot-scope
vue 插槽slot和具名插槽
作用都是在調(diào)用組件的時(shí)候傳遞一些DOM結(jié)構(gòu)進(jìn)去,
不同點(diǎn)是:具名插槽在傳遞DOM時(shí)需要聲明,傳遞給哪個(gè)slot的名字 name
他們用法簡(jiǎn)單不在贅述。
重點(diǎn)說(shuō)一下作用域插槽 slot-scope 的使用,以及vue2.6.X開始的新語(yǔ)法v-slot
作用域插槽的核心作用是
子組件給父組件傳遞數(shù)據(jù),當(dāng)然也包含上述插槽的能力
老版作用域插槽,
slot="test"
: 指定插槽的名字用prop
:可以隨便定義,表示子組件傳遞過(guò)來(lái)的值得對(duì)象,可以用解構(gòu)復(fù)制 { row, index }接受
<template slot="test" slot-scope="prop"> {{ prop.wife.a }} </template>
新版是這樣的,可以說(shuō)語(yǔ)法更加清晰
v-slot指令直接跟上插槽名稱,prop同上
<template v-slot:test="prop"> {{ prop.wife.b }} </template>
實(shí)例說(shuō)明
子組件
這里我定義了多個(gè)具名插槽,并且用父組件傳過(guò)來(lái)的數(shù)據(jù)嘗試傳遞回去
<template> <div> <slot :user="user"> <!-- 默認(rèn)顯示的值,當(dāng)父組件使用次作用域插槽時(shí),會(huì)被覆蓋 --> {{ 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以上兩種模式都支持,不過(guò)官方說(shuō)3.0就只支持v-slot指令了,
不使用作用域插槽就會(huì)顯示默認(rèn)的值,使用之后就按父組件的來(lái)
可以先動(dòng)態(tài)更新數(shù)據(jù)。
使用過(guò)element-ui的同學(xué),只要用過(guò)表格,我想現(xiàn)在應(yīng)該明白作用域插槽有多大的用處了吧
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue+SpringBoot開發(fā)V部落博客管理平臺(tái)
V部落是一個(gè)多用戶博客管理平臺(tái)。這篇文章主要介紹了Vue+SpringBoot開發(fā)V部落博客管理平臺(tái),需要的朋友可以參考下2017-12-12使用vue-cli webpack 快速搭建項(xiàng)目的代碼
這篇文章主要介紹了vue-cli webpack 快速搭建項(xiàng)目的教程詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11vue做移動(dòng)端適配最佳解決方案(親測(cè)有效)
這篇文章主要介紹了vue做移動(dòng)端適配最佳解決方案(親測(cè)有效),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue如何通過(guò)router-link或者button跳轉(zhuǎn)到一個(gè)新的頁(yè)面
這篇文章主要介紹了vue如何通過(guò)router-link或者button跳轉(zhuǎn)到一個(gè)新的頁(yè)面,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10詳解讓sublime text3支持Vue語(yǔ)法高亮顯示的示例
本篇文章主要介紹了讓sublime text3支持Vue語(yǔ)法高亮顯示的示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-09-09vue路由跳轉(zhuǎn)到新頁(yè)面實(shí)現(xiàn)置頂
這篇文章主要介紹了vue路由跳轉(zhuǎn)到新頁(yè)面實(shí)現(xiàn)置頂問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05