Question

我有一个父级组件：

<template>
    <ChildComponent :styles="styles" />
</template>

<script>
export default {
    data: () => ({
        styles: `
            p {
                color: red
            }
        `
    })
}
</script>

这是子组件：

<template>
    <p>Hello World</p>
</template>

<script>
export default {
    props: {
        styles: {
            type: String,
            required: true
        }
    }
}
</script>

<style scoped>

</style>

现在，我想使用子级中父组件提供的那些样式作为范围样式。例如：

<!-- ChildComponent.vue -->

<style scoped>
p {
    color: red
}
</style>

有什么办法吗？

Answer 1

如果要使用范围样式来定位子元素，则必须使用深度选择器。

可以通过

完成

a >>> b { color : red; }
\deep\ a b { color : red; }
a::v-deep b { color : red; }

这里是完整的解释：https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

Answer 2

您可以直接将styles道具设置为内联样式v-bind:style而不是范围样式。希望它能工作。

<template>     
<p v-bind:style="styles">Hello World</p>
</template>

Answer 3

如果你想在你的子组件中添加样式，基于调用它的父组件，你可以将一个属性作为道具传递，并将它作为一个类使用到子组件中。按照你的例子：

父组件：

<template>
    <ChildComponent styles="parent-style" />
</template>

子组件：

<template>
  <section :class="styles">
    <p>Hello World</p>
  </section>
</template>

<script>
export default {
    props: {
        styles: {
            type: String,
            required: true
        }
    }
}
</script>

<style lang="scss" scoped>
  .parent-style {
    p {
      color: red;
    }
  }

</style>

如何将样式传递给子组件并将其用作Vue中的作用域样式？

3 个答案: