Vue具名插槽+作用域插槽的混合使用方法
vue + elementui 的項(xiàng)目中，通過(guò)后端返回的數(shù)據(jù)動(dòng)態(tài)封裝表單組件。
其中有些場(chǎng)景：
1、有些下拉框是聯(lián)動(dòng)的，例如前面的一個(gè)下拉框選擇值之后，后一個(gè)下拉框才根據(jù)前面的下拉框選擇的值加載數(shù)據(jù)；
2、有些輸入框后面跟一個(gè)圖形操作等等
上面的需求就需要用到插槽了。
這里只簡(jiǎn)單的介紹 具名插槽+作用域插槽 混合在一起使用的方法。
其中組件 mulForms.vue 里面封裝的代碼是（注意 slot里面的寫(xiě)法）：
<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ù)。
其中父組件引用的時(shí)候：
<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)說(shuō)的都不是很明確，其中組件里面的 v-bind=“{ item, formResult }” 這樣的返數(shù)據(jù)，在官網(wǎng)沒(méi)有找到這樣的寫(xiě)法，還是參考別人的寫(xiě)法。
2、在引用組件的時(shí)候，父組件中 v-slot:computesign=“{item,formResult}” 的寫(xiě)法，computesign 就是表單組件中 item.slotName 的name值，后面的 { item, formResult } 就是父組件接收的表單組件返回的數(shù)據(jù)。如此就是 具名+作用域 插槽的用法
到此這篇關(guān)于Vue具名插槽+作用域插槽的混合使用的文章就介紹到這了,更多相關(guān)vue插槽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue使用xlsx和xlsx-style導(dǎo)出表格出現(xiàn)部分樣式缺失的問(wèn)題解決
這篇文章主要為大家詳細(xì)介紹一下Vue使用xlsx-style導(dǎo)出excel時(shí)樣式的設(shè)置,以及出現(xiàn)添加背景色,合并單元格部分樣式缺失問(wèn)題的解決,需要的可以參考下2024-01-01
vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)
這篇文章主要介紹了vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了nuxt.js 緩存實(shí)踐，nuxt 的緩存可以分為 組件級(jí)別緩存 , API級(jí)別緩存 以及 頁(yè)面級(jí)別緩存，本文就詳細(xì)的介紹了這三種緩存，感興趣的小伙伴們可以參考一下2018-06-06
基于Ant-design-vue的Modal彈窗 封裝 命令式與Hooks用法
這篇文章主要給大家介紹了基于Ant-design-vue的Modal彈窗封裝命令式與Hooks用法，文中有詳細(xì)的代碼示例，具有一定的參考價(jià)值，感興趣的同學(xué)可以借鑒閱讀2023-06-06
vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例
本篇文章主要介紹了vue實(shí)現(xiàn)登陸登出的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
elementui彈窗頁(yè)按鈕重復(fù)提交問(wèn)題解決方法
本文主要介紹了elementui彈窗頁(yè)按鈕重復(fù)提交問(wèn)題解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
解決Vue警告Write?operation?failed:computed?value?is?readonl
這篇文章主要給大家介紹了關(guān)于如何解決Vue警告Write?operation?failed:computed?value?is?readonly的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue 使用Props屬性實(shí)現(xiàn)父子組件的動(dòng)態(tài)傳值詳解
今天小編就為大家分享一篇Vue 使用Props屬性實(shí)現(xiàn)父子組件的動(dòng)態(tài)傳值詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
詳解nginx配置vue h5 history去除#號(hào)
這篇文章主要介紹了詳解nginx配置vue h5 history去除#號(hào)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11