如何列出 vue 组件中的所有可用插槽 [英] how to list all available slots in vue component

问题描述

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

I'm working on tool for design system and manual isolated testing of Vue components.

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

I would like to list all available slots and scopedSlots without rendering a component in DOM. Ideally - to do it on client side, but also possible on server-side (using vue test utils or whatever that works).

我试图从 vm 访问插槽，但 vm.$slots 只有从父组件填充的插槽.

I tried to access slots from vm but vm.$slots has only slots that filled from parent component.

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

Is there a way to get list of all slots somehow? I would like to avoid writing our own parser for templates...

推荐答案

我想这只能在mounted上使用.您可以为此使用 $refs:this.$refs['your-ref'].$slots 和 this.$refs['your-ref'].$scopedSlots

I guess it's only possible on mounted. You can use $refs for this: this.$refs['your-ref'].$slots and this.$refs['your-ref'].$scopedSlots

这篇关于如何列出 vue 组件中的所有可用插槽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！