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

我有一个父组件：

<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>

<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>

导出默认值{
数据：（）=>({
风格：`
p{
颜色：红色
}
`
})
}

这是子组件：

<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>

<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>

你好，世界

导出默认值{
道具：{
风格：{
类型：字符串，
必填项：true
}
}
}

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

<!-- ChildComponent.vue -->

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

p{
颜色：红色
}

---

有什么方法可以做到这一点吗？

如果您想使用范围样式将子元素作为目标，则必须使用深度选择器

这可以通过

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

---

以下是完整的解释：

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

<!-- ChildComponent.vue -->

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

父组件：

<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>

<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>

子组件：

<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>

<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>

你好，世界

导出默认值{
道具：{
风格：{
类型：字符串，
必填项：true
}
}
}
.父样式{
p{
颜色：红色；
}
}

之后，您可以将样式作为道具传递，只需获取样式对象并在模板上使用即可

更多信息可以在这里找到：

/deep/

也可以使用它应该是

/deep/

而不是

\deep\

我更正了帖子，在使用

/deep/

时，我刚刚得到了

预期的选择器编译错误。这只适用于您可以访问子源代码的情况。我认为更可能的情况是，您需要将作用域样式传递给您无法访问其源的子级。