vue插槽传值(隔代传值)

---

前言

本文论述的不是围绕怎么使用插槽传值，而是一种隔代传值的场景；

---

场景

相信大家都会高度的组件拆分，将一个组件的功能，拆分成多个组件共同完成这个功能;

举例一种下面场景：

你对elementUI的table组件进行了二次封装；分微z-crud、z-table、z-table-item,

想在z-curd的插槽作用与z-table-item

---

你可以这样写

z-crud

   <zCrud >
      <template #name="{row}">
        {{ row.name + '小同学' }}
      </template>
    </zCrud>

z-table(重点)

  <zTable >
      <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
        <slot :name="slot" v-bind="scope" />
      </template>
    </zTable>

z-table-item

  <el-table-column v-for="(item, index) in columns" :key="index" :label="handleAttribute(item.label, '')"
        :prop="handleAttribute(item.field, null)" v-bind="item">
        <template v-slot="scope">
          <slot :name="item.field" :row="scope.row">{{ scope.row[item.field] }}</slot>
        </template>
      </el-table-column>