slot-scope到底是什么
2020-03-30 本文已影响0人
小白的踩坑日常
插槽slot
- 插槽,也就是slot
- 插槽是组件的一块HTML模板
- 插槽就是要将父组件中的内容渲染到子组件中。就好像是在子组件中留了一个空的位置(就像小霸王上的插卡口),然后把父组件中的内容插进去(你的游戏卡盘)。
- 可以说,对于任何一个组件,从模板种类的角度来分,其实都可以分为非插槽模板和插槽模板两大类。
- 非插槽模板指的是html模板,指的是‘div、span、ul、table’这些,非插槽模板的显示与隐藏以及怎样显示由插件自身控制;插槽模板是slot,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定,slot写在组件template的哪块,父组件传过来的模板将来就显示在哪块。
slot-scope作用域插槽
做什么:解决父组件模板的所有东西都会在父级作用域内编译;
子组件模板的所有东西都会在子级作用域内编译------父组件的模板是无法使用到子组件模板中的数据
slot-scope的出现却实现了父组件调用子组件内部的数据,子组件的数据通过slot-scope属性传递到了父组件
怎么做:
<template slot-scope="scope">
<el-tooltip effect="dark" content="修改角色" placement="top" :enterable='false'>
<el-button type="primary" icon="el-icon-edit" size="mini" @click="changeUser(scope.row.id)" ></el-button>
</el-tooltip>
scope会得到当前模板的数据
引自:https://segmentfault.com/a/1190000012996217?utm_source=tag-newest
https://www.cnblogs.com/qiansk/p/11250850.html