Question

最好用一个例子来解释：这是一个可重用的sidebar.vue组件的模板（使用vuetify，尽管我认为这与该问题无关-我还必须删除模板标签本身，因为它们会随着堆栈溢出的渲染而变坏）：

<v-navigation-drawer 
    right clipped fixed
    :width="navBarWidth"
    v-on="$listeners" v-bind="$attrs">
    <v-card flat>
        <v-form>
            <v-card-title class="stages-heading">
                {{ heading }}
            </v-card-title>
            <slot></slot>
        </v-form>
    </v-card>
</v-navigation-drawer>

以下是使用此边栏的父vue组件的示例部分：

<sidebar>
    <v-card-title class="stages-subheading">Stage name</v-card-title>
</sidebar>

我想要实现的是，如果我将元素放入侧边栏的实例中，就像将v-card-title放在上面第二个框中的侧边栏的实例中一样，则子级将应用样式到该元素，因为它位于其标签内。因此，在上述情况下，每次我想在父组件中使用class="stages-subheading"时都必须使用v-card-title，我希望不必每次都使用<figure class="op-interactive"><iframe><blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="Url"></blockquote><script async src="//www.instagram.com/embed.js"></script></iframe></figure>，而是让我的侧边栏组件这样做我。

这可能是一个简单的示例，但是我需要了解如何执行此操作的概念，以便进一步进行介绍。

我已经尝试过搜索所有我能想到的东西，所以毫无帮助，非常感谢您的帮助：）

有没有一种方法可以使用子元素在父vue组件中根据上下文样式设置元素？

0 个答案: