vue3 中使用具名插槽传参slot template scope传递参数的写法？

Question

需求背景

封装一个带有操作栏的table组件，其中操作栏是插槽，传入各种操作的按钮，点击获取每行的数据

子组件

 <template v-if="columnEdit">
        <el-table-column :label="columTitle" :width="columnEditWidth ? columnEditWidth : ''" :fixed="columnEditFixed"
          align="center">
          <template #default="scope">
            <slot :row="scope.row" name="EditColumn"></slot>
          </template>
        </el-table-column>
      </template>

父组件

  <template v-slot:EditColumn slot-scope="scope">
        <div class="tableAction" @click="dataView(scope.row)">查看</div>
      </template>

scope row 一直反复报错 拿不到

求教应该如何写

Answer 1

在 vue 3 slot-scope 改成 v-slot 了

https://vuejs.org/guide/components/slots.html#scoped-slots

我拿官方例子试了一下可以拿到值

CTable.vue

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
    <el-table-column label="ACtion" >
         <template #default="scope">
            <slot  v-bind="scope.row" name="EditColumn"></slot>
          </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

App.vue

<template>
  <CTable>
    <template #EditColumn="scope">
        {{scope.date}}
    </template>
  </CTable>
</template>

<script lang="ts" setup>
import CTable from './CTable.vue'
</script>

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

是不是你这个 slot 对应错了，应该先接收一个默认插槽，默认插槽中在使用具名插槽。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 3

vue2的写法

<template>
<el-table-column
:prop=""
:label=""
align="center">
   <template slot-scope="scope">
      <!--  透传事件和属性    -->
      <slot v-on="$listeners" v-bind="scope"></slot>
    </template>
</el-table-column>
</template>