假设我们有这样一个组件，分别看一下他们在vue2.0和vue3.0输出的区别：
// 子组件comp.vue
<script>
export default{
mounted(){
console.log(this.$slots);
console.log(this.$scopedSlots);
}
}
</script>
// 父组件parent.vue
<comp>
<div>child1</div>
<div>child2</div>
<div>child3</div>
<div>child4</div>
<template>默认插槽</template>
<template v-slot:content>具名插槽content</template>
<template v-slot:test>具名插槽test</template>
</comp>
在vue2.0中输出如下
this.$slots
从下面输出的结果我们可以看出
this.$slots输出一个对象，这个对象包含了默认插槽和具名插槽，每个属性的值就是一个由vnode组成的数组
image.png
this.$scopedSlots
从下面的输出结果我们可以看出，
this.$scopedSlots这个对象包含了具名插槽和默认插槽，只不过每个属性的值是一个函数，执行一下这个函数就能得到对应的vnode组成的数组
image.png
在vue3.0中，输出如下
- 移除了
this.$scopedSlots这个api,将默认插槽和具名插槽全部放在了this.$slots里面，
this.$slots
我们看见vue3.0中
this.$slots输出的是一个proxy对象，具名插槽和默认插槽跟vue2.0的this.$scopedSlots一样都是一个函数，执行完得到一个vnode组成的数组，
image.png
Vue2.0和vue3.0还有一个区别就是vnode结构的不同
vue2.0的vnode结构
vue3.0的vnode结构
简单来总结一下
<comp>
<div label="标签">
<p>这是一段文本</p>
</div>
</comp>
标签上的属性像label这种
- 在vue2.0中，被解析到
this.$slots.default[0].data.attrs这个对象中 - 在vue3.0中，被解析到
this.$slots.default()[0].props这个对象中
像这个组件的默认插槽里面还有默认插槽
- 在vue2.0中，会被解析到
this.$slots.default[0].data.scopedSlots这个对象中 - 在vue3.0中，会被解析到
this.$slots.default()[0].children这个数组中
