作用域插槽的具体应用场景

Question

作用域插槽的具体应用场景
能不能举个具体的例子，便于理解

Answer 1

可以看看这张图

这个表格的板块类型、排序、创建时间、操作列等，都用到了作用域插槽，代码如下：

<template>
    <el-table
        v-loading="loading"
        :data="list"
        border
        width="100%"
    >
      <el-table-column
          align="center"
          prop="name"
          label="板块名称"
      >
      </el-table-column>
      <el-table-column
          align="center"
          prop="type"
          label="板块类型">
        <template slot-scope="scope">
          {{typeMap[scope.row.type]}}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="seq"
          label="排序"
      >
        <template slot-scope="scope">
          <QuickEdit
              :val="scope.row.seq"
              :row="scope.row"
              label="排序"
              :min="0"
              :max="999"
              tip="输入数字，数字越小越靠前"
              @result="handleSave"
          />
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="状态">
        <template slot-scope="scope">
          {{statusMap[scope.row.status]}}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="样式">
        <template slot-scope="scope">
          {{styleMap[scope.row.style]}}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="creator_name"
          label="创建人"
      >
      </el-table-column>
      <el-table-column
          align="center"
          label="创建时间"
      >
        <template slot-scope="scope">
          {{$globalFunction.formatTime(scope.row.create_time*1000)}}
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="操作"
          width="300"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.type === 4" type="success" size="mini" @click="ChildSection(scope.row)">子版块管理</el-button>
          <!-- 板块类型 课程列表，且关联类型为商品 -->
          <content-manage v-else-if="scope.row.type === 1 && scope.row.assoc_type === 1" :card_section_id="scope.row.id" />
          <el-button v-if="[2,3].includes(scope.row.type)" type="success" size="mini" @click="goImageList(scope.row)">内容管理</el-button>
          <el-button type="success" size="mini" @click="UpdateSection(scope.row)">编辑板块</el-button>
          <el-button type="danger" size="mini" @click="DeleteSection(scope.row)">删除</el-button>
        </template>
      </el-table-column>
  </el-table>
</template>

<script>
export default {
    name: "AppSection",
    components: {
      QuickEdit
    },
    created() {
      this.GetAppSectionList()
    },
    data() {
      return {
        loading: '',
        submitLoading: false,
        list: [],
        statusMap: {
          1: '展示',
          2: '隐藏'
        },
        seq: null,
      }
    },
    methods: {
      async GetAppSectionList() {
        const param = Object.assign({}, this.searchModel, this.pagination);
        const res = await this.$networkHandler.sendRequest(ApiEnums.GetAppSectionList, param,{},'loading', this);
        if (res) {
          this.list = res && res.list || [];
        }
      }
    }
}
</script>

因为这些特殊的列并不是直接展示row的字段，而是需要把对应字段传入子组件或者方法中进行处理，这是就会用到slot-scope。

自 2.6.0 起有所更新。已废弃的使用 slot-scope

只要把slot-scope替换成v-slot就可以了。

补充一下那个编辑排序的子组件样式：

Answer 2

用在动态组件上：
比如有个弹框组件 <module></module>,它有标题，蒙版，和一些弹框样式；在不同的页面有各种各样的需求，有一句话的，有表单，也有可能只有一张图片，你并不希望将所有的可能都定义在组件内部，就用slot放开，想放什么内容进去自己写。