vm.$scopedSlots和vm.$slots的理解和基本使用

官方定义
vm.$slots
类型：{[name: string]: ?Array}

• 只读
• 详细：
  用来访问被插槽分发的的内容。每个具名插槽有其相应的属性。default属性包括了所有没有被包含在具名插槽中的节点或v-slot:default的内容
  在使用渲染函数书写一个组件时，访问vm.slots最有帮助。

vm.$scopedSlots
类型：{[name: string]: props => Array | undefined}

• 只读
• 详细：
  用来访问作用域插槽。对于包括默认slot在内的每个插槽，该对象都包含一个返回相应VNode的函数。
  vm.$scopedSlots在使用渲染函数开发一个组件时特别有用。

代码验证

组件代码

实例代码

页面显示

image.png

控制台输出

image.png

可以看到，slots则为以slot名称作为属性名的对象。

我们将实例代码修改一个地方

页面显示

image.png

控制台输出

image.png

可以看到，$scopedSlots有了default属性，而$slots则少了default属性。

这也说明了作用域插槽和普通插槽的区别是使用插槽时是否有slot-scope特性。

不过因为我们没有给default插槽绑定插槽prop，此时的scope是一个空对象。

我们再修改一下组件代码，给default插槽绑定特性

页面显示

image.png

可以看到此时返回的scope已经不再是空对象了，而是刚才绑定的test对象。

使用案例
在上面的代码验证部分，我们已经了解vm.$slots和vm.$scopedSlots的定义，但是如何使用vm.$slots和vm.$scopedSlots呢？

在官方定义中，官方一直强调这两个定义在使用渲染函数开发一个组件时特别有用，所以以下我们就用vue的渲染函数和JSX来写一个案例。

组件代码

实例代码

页面显示

这时我们修改一个实例代码，给组件的default插槽写入内容

页面显示

image.png

我们发现，无论我们怎么修改，页面显示的列表项都是一样的，因为我们的default插槽是一样的。

如何才能显示不同的自定义列表项呢？这时就需要用到我们的vm.$scopedSlots了。

首先修改组件代码，如下

再修改实例代码，如下

页面显示

image.png

vm.$scopedSlots和vm.$slots的理解和基本使用