Vue具名插槽+作用域插槽的混合使用方法
vue + elementui 的項目中，通過后端返回的數(shù)據(jù)動態(tài)封裝表單組件。
其中有些場景：
1、有些下拉框是聯(lián)動的，例如前面的一個下拉框選擇值之后，后一個下拉框才根據(jù)前面的下拉框選擇的值加載數(shù)據(jù)；
2、有些輸入框后面跟一個圖形操作等等
上面的需求就需要用到插槽了。
這里只簡單的介紹 具名插槽+作用域插槽 混合在一起使用的方法。
其中組件 mulForms.vue 里面封裝的代碼是（注意 slot里面的寫法）：
<template v-if="item.slotName">
<el-form-item
:label="item.name"
:disabled="item.isedit == 0"
:prop="item.columncode"
>
<slot
:name="item.slotName"
v-bind="{ item, formResult }"
></slot>
</el-form-item>
</template>
注解：
slot中的 :name=“item.slotName” 是具名插槽的使用， v-bind=“{ item, formResult }” 是向父組件傳遞的子組件的數(shù)據(jù)。
其中父組件引用的時候：
<mulForms>
<template v-slot:framesystem="{item,formResult}">
<div class="form-item">
<span>{{item.name}}</span>
</div>
</template>
<template v-slot:computesign="{item,formResult}">
<div class="form-item">
<span>item:{{item.name}}</span>
</div>
</template>
</mulForms>
注解：
v-slot:framesystem=“{item,formResult}” 中的 framesystem 為name，后面的 {item,formResult} 為組件向父組件返回的數(shù)據(jù)。
總結(jié)：
1、vue官網(wǎng)說的都不是很明確，其中組件里面的 v-bind=“{ item, formResult }” 這樣的返數(shù)據(jù)，在官網(wǎng)沒有找到這樣的寫法，還是參考別人的寫法。
2、在引用組件的時候，父組件中 v-slot:computesign=“{item,formResult}” 的寫法，computesign 就是表單組件中 item.slotName 的name值，后面的 { item, formResult } 就是父組件接收的表單組件返回的數(shù)據(jù)。如此就是 具名+作用域 插槽的用法
到此這篇關(guān)于Vue具名插槽+作用域插槽的混合使用的文章就介紹到這了,更多相關(guān)vue插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中nextTick函數(shù)和react類似實現(xiàn)代碼
Vue 3 中的 nextTick 主要通過 Promise 實現(xiàn)異步調(diào)度,返回一個 Promise 對象,這篇文章主要介紹了vue中nextTick函數(shù)和react類似實現(xiàn)代碼,需要的朋友可以參考下2024-04-04
vue自定義switch開關(guān)組件,實現(xiàn)樣式可自行更改
今天小編就為大家分享一篇vue自定義switch開關(guān)組件,實現(xiàn)樣式可自行更改，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法
這篇文章主要介紹了Vue3?在＜script?setup＞里設(shè)置組件name屬性的方法,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
這篇文章主要介紹了Vue3中操作ref的四種使用方式示例代碼(建議收藏),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了解決vue項目router切換太慢問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue2.0 事件的廣播與接收(觀察者模式)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
今天小編就為大家分享一篇Vue退出登錄時清空緩存的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了如何使用Vue編寫一個簡單的日期選擇器,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
element?ui?就是基于vue的一個ui框架,該框架基于vue開發(fā)了很多相關(guān)組件,方便我們快速開發(fā)頁面,餓了么前端團(tuán)隊基于vue進(jìn)行開發(fā)并且進(jìn)行了開源?element?ui?中提供全部都是封裝好組件,本文給大家介紹Element?UI安裝全過程,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04