为啥在 this.$scopedSlots 中也可以使用 Vue 常规插槽？

Posted 2023-02-23

【中文标题】为啥在 this.$scopedSlots 中也可以使用 Vue 常规插槽？

【英文标题】：Why Vue regular slots also available in this.$scopedSlots?为什么在 this.$scopedSlots 中也可以使用 Vue 常规插槽？

【发布时间】：2020-12-24 15:24:41

【问题描述】：

请看这个最小的例子

Test.vue

<template>
  <div>
    <slot name="this_is_not_scoped_slots"/>
  </div>
</template>

<script >
import Vue from "vue";

export default Vue.extend(
  mounted() 
    console.log(Object.keys(this.$scopedSlots));
  
);
</script>

App.vue

<template>
  <Test>
    <template #this_is_not_scoped_slots>But it shows in this.$scopedSlots</template>
  </Test>
</template>

<script>
import Test from "./Test.vue";

export default 
  components: 
    Test
  
;
</script>

在上面的例子中，这个控制台将注销["this_is_not_scoped_slots"]。

为什么会这样？

Vue实例中有两个属性

this.$slots this.$scopedSlots

这两者的行为完全不同：

如果您使用v-slot:my_scope_name=" someValue "，那么my_scope_name 将不会出现在this.$slots 中 但是，无论您定义什么，您的命名槽将始终显示在this.$scopedSlots

为什么会这样？

我正在构建一个库，如果用户提供了命名插槽，我想进行条件渲染，我应该始终使用this.$scopedSlots 来检测这些东西吗？

【问题讨论】：

我相信新的插槽语法是以这种方式实现的，以便更轻松地迁移到 Vue 3。请参阅github.com/vuejs/rfcs/blob/master/active-rfcs/…。

【参考方案1】：

根据official API：

.... 所有$slots 现在也作为函数公开在$scopedSlots 上。如果您使用渲染函数，现在建议始终通过 $scopedSlots 访问插槽，无论它们当前是否使用范围。这不仅可以简化未来的重构以添加范围，还可以简化您最终迁移到 Vue 3 的过程，其中所有插槽都将成为函数。