如何列出 vue 组件中所有可用的插槽答案

【问题标题】：how to list all available slots in vue component如何列出 vue 组件中所有可用的插槽
【发布时间】：2018-11-05 19:39:29
【问题描述】：

我正在开发用于设计系统和手动隔离 Vue 组件测试的工具。

我想列出所有可用的插槽和 scopedSlots，而不在 DOM 中渲染组件。理想情况下 - 在客户端执行此操作，但也可以在服务器端执行（使用 vue 测试工具或任何有效的方法）。

我尝试从vm 访问插槽，但vm.$slots 仅具有从父组件填充的插槽。

有没有办法以某种方式获取所有插槽的列表？我想避免为模板编写我们自己的解析器......

【问题讨论】：

标签： vue.js

【解决方案1】：

我猜这只能在挂载时使用。您可以为此使用 $refs：this.$refs['your-ref'].$slots 和 this.$refs['your-ref'].$scopedSlots

【讨论】：

$slots 和 $scopedSlots 仅列出使用组件时填充的插槽。 :-( 这实际上有点令人困惑，因为如果您的模板中有 v-if，它们的内容可能会在运行时发生变化。