如何获取Vue组件的所有可用插槽及作用域插槽（无需渲染DOM）

我之前做设计系统组件文档工具的时候，刚好遇到过完全一样的需求——要在不渲染组件的前提下，自动提取所有定义的插槽（包括作用域插槽），不想自己写复杂的模板解析器。这里分享几个可行的方案，分客户端和服务端/测试环境两种场景：

客户端方案：利用Vue官方编译器解析模板 #

Vue官方提供了模板编译器，可以直接解析组件的模板字符串生成AST（抽象语法树），然后遍历AST就能提取所有插槽信息。

Vue 3 实现示例 #

使用@vue/compiler-dom包（Vue3内置的编译器，用Vite的话已经内置，无需额外安装）：

import { compile } from '@vue/compiler-dom'

/**
 * 从组件模板中提取所有插槽信息
 * @param {string} template - 组件的模板字符串
 * @returns {Object} 包含默认插槽、普通命名插槽、作用域插槽的信息
 */
function extractAllSlots(template) {
  const { ast } = compile(template)
  const slotInfo = {
    hasDefaultSlot: false,
    namedSlots: [],
    scopedSlots: []
  }

  // 递归遍历AST节点
  function traverseNode(node) {
    if (!node) return

    // 识别slot标签
    if (node.type === 1 && node.tag === 'slot') {
      // 获取插槽名称，默认是default
      const slotName = node.props.find(p => p.name === 'name')?.value?.content || 'default'
      // 判断是否是作用域插槽：看是否有v-bind绑定属性，或者Vue2中的slot-scope
      const isScoped = node.props.some(p => 
        p.name === 'v-bind' || 
        p.name.startsWith(':') || 
        (p.directive && p.name === 'slot-scope')
      )

      if (slotName === 'default') {
        slotInfo.hasDefaultSlot = true
      } else if (isScoped) {
        slotInfo.scopedSlots.push(slotName)
      } else {
        slotInfo.namedSlots.push(slotName)
      }
    }

    // 遍历子节点
    node.children.forEach(traverseNode)
  }

  traverseNode(ast)
  return slotInfo
}

// 使用示例
const MyTableComponent = {
  template: `
    <div class="table">
      <slot></slot> <!-- 默认插槽 -->
      <slot name="header" :column="columns"></slot> <!-- 作用域插槽 -->
      <slot name="footer"></slot> <!-- 普通命名插槽 -->
    </div>
  `
}

const slots = extractAllSlots(MyTableComponent.template)
console.log(slots)
// 输出：{ hasDefaultSlot: true, namedSlots: ['footer'], scopedSlots: ['header'] }

Vue 2 实现示例 #

Vue2可以用vue-template-compiler包，思路和Vue3一致，只是AST结构略有不同：

const compiler = require('vue-template-compiler')

function extractAllSlotsVue2(template) {
  const ast = compiler.compile(template).ast
  const slotInfo = {
    hasDefaultSlot: false,
    namedSlots: [],
    scopedSlots: []
  }

  function traverse(node) {
    if (!node) return
    if (node.tag === 'slot') {
      const slotName = node.attrsMap.name || 'default'
      const isScoped = !!node.attrsMap['slot-scope'] || Object.keys(node.attrsMap).some(key => key.startsWith(':'))
      
      if (slotName === 'default') {
        slotInfo.hasDefaultSlot = true
      } else if (isScoped) {
        slotInfo.scopedSlots.push(slotName)
      } else {
        slotInfo.namedSlots.push(slotName)
      }
    }
    if (node.children) {
      node.children.forEach(traverse)
    }
  }

  traverse(ast)
  return slotInfo
}

服务端/测试环境方案（如Vue Test Utils） #

如果是在测试环境或者Node.js服务端，可以结合Vue Test Utils，但核心还是通过解析组件的模板来提取插槽——不需要真正渲染到DOM，甚至可以不用挂载组件，直接获取组件的$options.template来处理。

比如Vue3 + Vue Test Utils的示例：

import { mount } from '@vue/test-utils'
import { compile } from '@vue/compiler-dom'
import MyComponent from './MyComponent.vue'

// 不需要挂载，直接拿组件的模板
const template = MyComponent.template
// 用上面的extractAllSlots方法解析
const slots = extractAllSlots(template)

// 如果组件是用render函数写的，那可以把render函数转换为模板再解析，或者直接分析render函数中的插槽调用
// 不过render函数分析复杂度较高，更推荐优先用模板解析

为什么vm.$slots不行？ #

你提到的vm.$slots只包含父组件传递过来的插槽内容，而不是组件自身定义的「可用插槽列表」。组件定义的插槽是在模板/render函数中声明的，所以必须从组件的模板或渲染逻辑中提取，而不是从实例的$slots属性获取。

内容的提问来源于stack exchange，提问作者Hello Deadline