项目随笔-高级组件抽取-插槽使用-CSDN博客

本文链接：https://blog.csdn.net/qq_52031408/article/details/130810871

文章讲述了在Vue.js应用中，如何在组件内定义并使用自定义插槽。通过content.config.ts配置文件定义type和slotName，然后在PageContent.vue组件中动态绑定插槽名称，利用scope将数据传递给插槽。在department.vue中，展示了如何使用这些插槽来展示部门领导和上级部门的信息。

摘要由CSDN通过智能技术生成

1.定义类型type和即将使用的插槽名称slotName

//content.config.ts项目配置文件中

    {
      type: 'custom',
      label: '部门领导',
      prop: 'leader',
      width: '150px',
      slotName: 'leader'
    },

    {
      type: 'custom',
      label: '上级部门',
      prop: 'parentId',
      width: '150px',
      slotName: 'parent'
    },

动态绑定插槽名称，v-bind=“scope”把从store中获取pageList的每条数据绑定给插槽

：props是动态绑定配置文件的属性,age是我们直接在插槽上自定义的属性，都会被传到插槽的scope属性上，如最后使用时候的例子

PageContent.vue组件代码中

<div class="table">
      <el-table :data="pageList" border style="width: 100%">
        <template v-for="item in contentConfig.propsList" :key="item.prop">

          <template v-else-if="item.type === 'custom'">
            <el-table-column align="center" v-bind="item">  //正常渲染到这就可以了
              <template #default="scope">
                <slot
                  :name="item.slotName"
                  v-bind="scope"
                  :prop="item.prop"
                  age="18"
                ></slot>
              </template>
            </el-table-column>
          </template>

        </template>
      </el-table>
</div>

scope.row[scope.prop]使用我们配置文件动态绑定的属性，scope.age是我们直接在插槽上定义的属性，scope.row.parentId则是我们scope从pageList中接收的数据，以上都在scope上

//在department.vue中使用子组件pageContent.vue


    <PageContent
      :content-config="contentConfig"
      ref="contentRef"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
    >
      <template #leader="scope">
        <span class="leader">哈哈哈:{{ scope.row[scope.prop] }}</span>
        <span>{{ scope.age }}</span>
      </template>
      <template #parent="scope">{{ scope.row.parentId }}</template>
    </PageContent>

效果如下：