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

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>

总结

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