我需要从其父组件修改 Vue 组件的一些 CSS 属性。它将覆盖组件内定义的 CSS。
我首先期望对于一个组件<my-component>，我可以直接从父元素设置它的样式，就像任何其他元素一样：
my-component {
font-weight: bolder;
}
这是行不通的。
我尝试的第二个解决方案是将一个 prop 传递给组件，并在样式中使用相关信息。这是可行的，但我仍然希望有一个更接近继承机制的解决方案（其中父级的设置优先于子级的设置，类似于，例如，样式化<b>元素）。
有这样的机制吗？
当 Vue 渲染组件的模板时，自定义组件标签将替换为其模板定义。因此，尝试在 CSS 中选择自定义组件的标签将不起作用，因为该标签不在 DOM 中。
只需添加一个class属性到子组件的根元素（因为这是插入到 DOM 中代替自定义组件标签的内容）。为了保持理智，我只是将类名设置为与组件的名称相同。然后你可以通过以下方式选择 CSS 中任何位置的组件.my-component.
这是一个简单的例子：
Vue.component('my-component', {
template: `<div class="my-component">Foo</div>`,
})
new Vue({ el: '#app' })
.my-component { color: goldenrod; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<my-component/>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
