vue 使用slot进行数据传递拿到表格id(插槽简单使用)
slot插槽使用传值组件页面:<template ><slot name="bth" >//name用来定义名称</slot></template>调用页面<templatev-slot:bth>//v-slot这个必须这么写冒号后面是组件页面定义的名称//这个里面就可以写你想要的展示的内容</template>上面是简单的插
·
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 的试试
更多推荐
已为社区贡献10条内容
所有评论(0)