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

slot插槽使用传值
组件页面:

 <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

你可能感兴趣的:(vue,slot,vue)