Question

我需要从其父级修改Vue组件的一些CSS属性。它将覆盖组件中定义的CSS。

我首先期望对于组件<my-component>，我可以直接从父组件设置样式，就像任何其他元素一样：

my-component {
    font-weight: bolder;
}

这不起作用。

我尝试的第二个解决方案是将支柱传递给组件，并在样式中使用相关信息。这有效，但我仍然希望有一个更接近继承机制的解决方案（其中父项的设置优先于子项的设置，类似于样式化<b>元素）。

有这样的机制吗？

Answer 1

当Vue呈现组件的模板时，自定义组件标记将替换为其模板定义。因此，尝试在CSS中选择自定义组件的标记将不起作用，因为该标记不在DOM中。

只需将class属性添加到子组件的根元素（因为这是插入DOM而不是自定义组件标记的内容）。为了理智，我只是让类名与组件同名。然后，您可以通过.my-component在CSS中的任意位置选择组件。

这是一个简单的例子：

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>

Answer 2

获取灵感：

＆＃13;

var comp = {
  template: '<p><slot></slot></p>'
}

new Vue({
  el: '#app',
  data: {
    inParent: true
  },
  components: {
    comp
  },
  methods: {
    change () {
      this.inParent = !this.inParent
    }
  }
})

＆＃13;

.blue {
  background-color: blue
}

＆＃13;

<div id="app">
  This button is in parent:
  <button @click="change">change child style</button>
  <comp :class="{blue: inParent}">This is child component</comp>
</div>

<script src="https://unpkg.com/vue"></script>

＆＃13;

如何从父级修改组件的样式？

2 个答案: