欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue具名插槽+作用域插槽的混合使用方法

 更新時間：2022年09月26日 11:28:23   作者：前端不加班  
這篇文章主要介紹了Vue具名插槽+作用域插槽的混合使用,這里只簡單的介紹?具名插槽+作用域插槽?混合在一起使用的方法，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

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)文章

最新評論