Question

我正在为我们在工作中创建的一些自定义组件创建交互式样式指南。它遍历全局注册的组件列表，然后显示其道具。然后，用户可以编辑prop值，并查看其如何影响渲染的组件。

现在，我需要弄清楚如何允许与某些组件的插槽交互。例如，我们有自己的button组件，看起来像这样：

<template>
    <button :class="customClasses">
        <slot></slot>
    </button>
</template>

我有一个componentPreviewRenderer组件，显示了我们自定义组件的呈现。看起来像这样：

export default {
    props: {
        component: String, //The name of the global component to render
        props: Object //List of component props
    },
    render (createElement): {
        return createElement(
            this.component,
            {
                props: this.props
            }
        );
    }
}

我需要（1）找出要渲染的组件模板是否具有插槽，以及（2）获取插槽名称列表，以便将其传递到createElement()函数中并让用户进行编辑广告位值。例如，对于按钮组件，他们应该能够编辑“默认”槽，该槽控制出现在按钮上的文本。

我已经看过this article，但是我希望能够直接从正在渲染的Vue组件中获取插槽名称，而不必通过.vue文件进行解析。我尝试过类似Vue.component(this.component).$slots之类的事情，但$slots未定义。有谁知道我将如何获取正在渲染的组件的插槽名称？

从Vue模板获取插槽名称列表

0 个答案: