Vue 中的作用域插槽理解 slot-scope

Vue 的插槽分为3种

• 匿名插槽
• 具名插槽
• 作用域插槽

---

匿名插槽/具名插槽

子组件中定义一个slot占位符；父组件调用时，在slot对应的位置填充模板即可

---

作用域插槽 slot-scope

1 父组件传递数据给子组件
2 子组件通过 props 接收数据
3 子组件拿到数据后通过 v-for 渲染，并且通过 的方式把数据传递给父组件
4 父组件通过 slot-scope=“scope” 接收数据就可以使用了

理解：

例如当你要给同事封装一个列表组件，你就需要使用作用域插槽（注意是列表或类似列表的组件）

就类似 element-ui 里的 table 组件一样

列表组件的循环，是发生在组件内部的，所以通过 v-for，列表组件很容易拿到每一项数据，但列表拿到数据没用，列表只是一个瓜皮，它不懂业务逻辑

这个数据是你同事的业务数据，所以这个数据必须得交给组件的调用者，也就是把数据交给你的同事才对