ElementUI 组件库默认插槽的使用（#default）

[stars-oceans]

ElementUI【一】elementUI组件库默认插槽的使用（#default）

前言 在使用elementUI组件库的时候，经常遇见组件带有默认插槽，带有默认插槽的需要我们改写，因为在接下来的删除、添加等功能中点用函数需要传参。

一、基于vue2的ElementUI

例如：table组件中的默认插槽slot-scope="scope"，这里是老版写法，我们也这样写就会报错。

    <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>

这里需要改写为：

1.第一种写法

    <template #defalut="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>

2.第二种写法

     <template #defalut>
        <el-button
          size="mini"
          @click="handleEdit({row})">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete({row})">Delete</el-button>
      </template>

3.第三种写法

   <template #defalut="{row}">
        <el-button
          size="mini"
          @click="handleEdit(row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(row)">Delete</el-button>
      </template>

二、基于vue3的ElementUI(element-plus)

例如：table组件中的默认插槽#default="scope""或#default，。

  <template #default>
        <el-button link type="primary" size="small" @click="handleClick"
          >Detail</el-button>
        <el-button link type="primary" size="small">Edit</el-button>
 </template>

    <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button>
   </template>

这里需要改写为：

1.第一种写法

<template #default='scope'>
<el-button link type="primary" size="small" @click="handleClick"
Detail</el-button

<el-button link type="primary" size="small">Edit</el-button>
</template>

2.第二种写法

<template #defalut>
<el-button
size="mini"
@click="handleEdit({row})">Edit</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete({row})">Delete</el-button>
</template>

3.第三种写法

     <template #defalut="{row}">
        <el-button
          size="mini"
          @click="handleEdit(row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(row)">Delete</el-button>
      </template>

总结

两个版本的默认插槽使用方法一样，传参的三种方式也相同。