假设我们有这样一个组件，分别看一下他们在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这个数组中