【Vue】获取作用域插槽

$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 的所有内容, 只是被转换成函数形式