vue + elementui 的專案中，通過後端返回的資料動態封裝表單元件。

其中有些場景：

　　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 } 就是父元件接收的表單元件返回的資料。如此就是 具名+作用域 插槽的用法。