4 / 3 Vue中的 slot 与 slot-scope

前面的话

前端日问，巩固基础，不打烊！！！

解答

单个Slot（匿名插槽）

在子组件内使用特殊的< slot>元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将代替子组件的 < slot>标签以及它的内容。（一个组件只能有一个单个Slot）

看个例子：

父组件中所有的元素都会放到子组件的单个slot中。

具名插槽

匿名属性是没有name属性的，所以叫匿名插槽，那么有name属性的就叫具名插槽了。

具名插槽可以在组件内出现n次，其name属性不同，对应的父模板的内容也不同。

举个例子：

每个具名插槽对应一个，而没有设置name属性的，将作为单个slot，而父组件中没有使用slot特性的元素与内容将出现在单个slot中。

作用域插槽

Vue.js实战是这样说的：作用域插槽是一种特殊的solt,用一个可以复用的模板替换以渲染的元素。

小柒的通俗理解：父组件中模板内的数据是来自子组件绑定的数据，而在父组件中只负责如何显示（以什么形式显示子组件的数据) 。

看个例子：

父组件：

slot-scope="xxx"，这个xxx可以自定义，它可以访问子组件中slot元素绑定的数据。

父组件内三次调用，每一次都是显示的子组件中的books数组的内容，只不过每次显示的方式不同。

子组件：