this.$slots 和 this.$scopedSlots区别

vue2(2.6.0及以上版本)

封装组件时研究 this.$slots 和 this.$scopedSlots区别

A组件是作用域插槽

<template>
    <span class="text-gray" v-if="$scopedSlots.tip">
        <slot name="tip" :text="text"></slot>
    </span>
</template>


<script>


export default {


    mounted() {
        console.log("slots", this.$slots)
        console.log("scopedSlots", this.$scopedSlots) 
    },


}


</script>

// 第一种情况 具名插槽
<A>
  <template #tip>xxx</template>
</A>
// 输出结果 this.$slots 和 this.$scopedSlots 都有值




// 第二种情况 作用域插槽
<A>
  <template #tip="{text}">{{ text }}</template>
</A>
// 输出结果 this.$scopedSlots有值 this.$slots为空对象

this.$slots输出一个对象，这个对象包含了默认插槽和具名插槽，每个属性的值就是一个由vnode组成的数组

this.$scopedSlots这个对象包含了具名插槽和默认插槽，每个属性的值是一个函数，执行一下这个函数就能得到对应的vnode组成的数组

Vue3:

移除了this.$scopedSlots这个api,将默认插槽和具名插槽全部放在了this.$slots里面

this.$slots输出的是一个proxy对象，具名插槽和默认插槽跟vue2.0的this.$scopedSlots一样都是一个函数，执行完得到一个vnode组成的数组

总结：

vue2 （2.6.0 及以上版本）建议使用 this.$scopedSlots ，不容易出错

vue3 则直接使用this.$slots