vue 使用slot进行数据传递拿到表格id（插槽简单使用）

slot插槽使用传值
组件页面：
vue2.0用法

 <template >
        <slot name="bth" >     //name用来定义名称
        </slot>
 </template>

调用页面

<template   v-slot:bth>  
 //v-slot这个必须这么写冒号后面是组件页面定义的名称
 //这个里面就可以写你想要的展示的内容
</template>

上面是简单的插槽使用

下面写一下怎么通过插槽拿到表格的id，比如实现删除功能
首先需要了解拿到表格id有已经写好的方法slot-scope=“scope”，必须写在template 中

//组件页面

<el-table-column >  
             <template slot-scope="scope">
             //这个是element的功能slot-scope="scope"用来获取表格id
                  <slot name="bth" :scope="scope">
                  //自己定义的插槽
                  </slot>
              </template>
 </el-table-column>

//页面使用
<template v-slot:bth="{scope}"> 
         //v-slot还是固定的bth是插槽名字，等于号后面的"{scope}"
         是这个slot-scope="scope"后面的名字
       <el-button type="danger" size="mini" @click="Del(scope)">
       //调用Del方法把scope传递出去，就可以拿到表格的id
       删除</el-button>
</template>

想要拿到id首先数据要有id！！！！！！
可以在数据里面添加一个字段id

-----------------------在我使用3.0 的时候发现表格里面插槽的用法不一样
以下是3.0用法

//组件页面
<el-table-column >  
             <template  #default = 'scope'>
                  <slot name="bth" :scope="scope">   </slot>
              </template>
 </el-table-column>

//页面使用
<template v-slot:bth="{scope}"> 
       <el-button type="danger" size="mini" @click="Del(scope)">删除</el-button>
</template>

区别就是slot的写法不一样

3.0 <template #default = ‘scope’>

2.0 <template slot-scope=“scope”’>

3.0里面使用2.0 的写法可能会报错
在此说的是可能报错，如果2.0的写法报错，那就使用3.0 的试试