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

更新時間：2022年09月26日 11:28:23 作者：前端不加班

這篇文章主要介紹了Vue具名插槽+作用域插槽的混合使用,這里只簡單的介紹?具名插槽+作用域插槽?混合在一起使用的方法，結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

vue + elementui 的項目中，通過后端返回的數據動態(tài)封裝表單組件。

其中有些場景：

1、有些下拉框是聯動的，例如前面的一個下拉框選擇值之后，后一個下拉框才根據前面的下拉框選擇的值加載數據；

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 }” 是向父組件傳遞的子組件的數據。

其中父組件引用的時候：

<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} 為組件向父組件返回的數據。

總結：

1、vue官網說的都不是很明確，其中組件里面的 v-bind=“{ item, formResult }” 這樣的返數據，在官網沒有找到這樣的寫法，還是參考別人的寫法。

2、在引用組件的時候，父組件中 v-slot:computesign=“{item,formResult}” 的寫法，computesign 就是表單組件中 item.slotName 的name值，后面的 { item, formResult } 就是父組件接收的表單組件返回的數據。如此就是具名+作用域插槽的用法

到此這篇關于Vue具名插槽+作用域插槽的混合使用的文章就介紹到這了,更多相關vue插槽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: