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

问题描述

请参阅此最小示例

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实例中有两个属性

1. this.$slots
2. this.$scopedSlots

这两个行为截然不同：

1. 如果您使用v-slot:my_scope_name="{ someValue }"，则my_scope_name不会显示在this.$slots
2. 但是，无论您定义什么，您指定的位置都将始终显示在this.$scopedSlots
中

为什么会这样？

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

解决方法

根据official API：

1. ....
2. 所有$slots现在也作为功能公开在$scopedSlots上。如果使用渲染功能，则现在建议始终通过$scopedSlots访问插槽，无论它们当前是否使用示波器。这不仅使将来的重构工作更加简单，而且还简化了最终迁移到Vue 3的工作，在Vue 3中，所有插槽都是功能。