【Vue】$slots 无法获取具名作用域插槽

$slots 无法获取具名作用域插槽

在使用具名作用域插槽时 v-slot:btn="{ userName }", 该插槽无法用 $slots 获取到, 要使用 $scopedSlots 获取

原代码

父组件

<div id="wrapper">
    <testCom ref="testCom">
        <p>默认插槽文本</p>

        <template v-slot:btn="{ userName }">
            <p>作用域插槽插入文本 {{ userName }}</p>
        </template>
    </testCom>
</div>

testCom 组件

const testCom = {
    template: 
    `<div>
        <h2>我是子组件 的 标题</h2>
        
        <slot />
            
        <slot name="btn" :userName="name" />
    </div>`,
    data: () => {
        return {
            name: 'zhangkb'
        }
    },
    mounted() {
        console.log('test',this.$slots)
    }
}

• 打印出的 this.$slots 中只有 default, 没有btn
  
• 修改父组件中的插槽语法为 <template v-slot:btn> 时, $slots 中有具名插槽 btn
  
• 在具名插槽带作用域的情况下 v-slot:btn="{ userName }", 修改打印信息为 console.log('test',this.$slots)
  
• 修改打印信息为 console.log('test',this.$scopedSlots.btn())
  

vue 文档

$slots 文档如下

$scopedSlots 文档如下

结论

$slots 只能获取到 不带作用域（具名或默认）的插槽内容, 如<div>默认插槽文本</div> 或 <tamplate v-slot:btn ></template>

有作用域时, 如 <template v-slot:btn="{ userName }"></template>, 只能用 $scopedSlots 来获取, 并且取到的是可以返回对应插槽内容的函数

$scopedSlots 中包含 $slots 的所有内容, 只是被转换成函数形式