为何已传入插槽模板，this.$slots.slotname仍返回undefined？

你遇到的问题核心是作用域插槽与普通插槽在Vue中的存储对象不同：

你定义的<slot name="group" :groupBy="groupBy" />属于作用域插槽（父组件通过#group="{ groupBy }"接收插槽传递的参数），在Vue 2中，这类插槽实例不会存放在this.$slots里，而是存放在this.$scopedSlots对象中，所以直接访问this.$slots.group会返回undefined。

解决步骤 #

1. Vue 2 环境下检查作用域插槽 #

在子组件中，改用this.$scopedSlots访问作用域插槽：

// 检查group插槽是否被父组件填充
if (this.$scopedSlots.group) {
  // 插槽已传入，执行对应逻辑
}

// 检查sort插槽同理
if (this.$scopedSlots.sort) {
  // 执行对应逻辑
}

2. Vue 3 环境下检查插槽 #

Vue 3已统一插槽访问方式，所有插槽（包括普通和作用域）都可通过this.$slots访问，组合式API则用useSlots()钩子：

// 选项式API
if (this.$slots.group) {
  // 执行对应逻辑
}

// 组合式API
import { useSlots } from 'vue'
const slots = useSlots()
if (slots.group) {
  // 执行对应逻辑
}

额外说明 #

作用域插槽本质是返回VNode的函数，所以this.$scopedSlots.group在父组件传入插槽时会是一个函数，可通过!!this.$scopedSlots.group快速判断插槽是否存在。

内容的提问来源于stack exchange，提问作者DarT ALex