如何解决有没有一种方法可以使用子元素在父vue组件中根据上下文样式设置元素?
最好用一个例子来解释:
这是一个可重用的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>
,而是让我的侧边栏组件这样做我。
这可能是一个简单的示例,但是我需要了解如何执行此操作的概念,以便进一步进行介绍。
我已经尝试过搜索所有我能想到的东西,所以毫无帮助,非常感谢您的帮助:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。