假設我們有這樣一個組件窃判，分別看一下他們在vue2.0和vue3.0輸出的區(qū)別：
// 子組件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組成的數(shù)組
image.png
this.$scopedSlots
從下面的輸出結果我們可以看出护赊，
this.$scopedSlots這個對象包含了具名插槽和默認插槽动壤，只不過每個屬性的值是一個函數(shù)乞封，執(zhí)行一下這個函數(shù)就能得到對應的vnode組成的數(shù)組
image.png
在vue3.0中鳖孤，輸出如下
- 移除了
this.$scopedSlots這個api,將默認插槽和具名插槽全部放在了this.$slots里面，
this.$slots
我們看見vue3.0中
this.$slots輸出的是一個proxy對象绪颖，具名插槽和默認插槽跟vue2.0的this.$scopedSlots一樣都是一個函數(shù)秽荤，執(zhí)行完得到一個vnode組成的數(shù)組，
image.png
Vue2.0和vue3.0還有一個區(qū)別就是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這個數(shù)組中
