Tengo un componente padre:
<template> <ChildComponent :styles="styles" /> </template> <script> export default { data: () => ({ styles: ` p { color: red } ` }) } </script>Y este es el componente hijo:
<template> <p>Hello World</p> </template> <script> export default { props: { styles: { type: String, required: true } } } </script> <style scoped> </style>Ahora quiero usar esos estilos proporcionados por el componente principal en el elemento secundario como estilos de alcance. Como por ejemplo:
<!-- ChildComponent.vue --> <style scoped> p { color: red } </style>¿Hay alguna manera de hacerlo?
Si desea apuntar a los elementos secundarios con un estilo de alcance, debe usar el selector profundo.
que se puede hacer con
a >>> b { color : red; } /deep/ ab { color : red; } a::v-deep b { color : red; }Aquí está la explicación completa: https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
Si desea agregar el estilo en su componente secundario, según el componente principal que lo llama, puede pasar un atributo como accesorio y usarlo como una clase en el componente secundario. Siguiendo tu ejemplo:
Componente principal:
<template> <ChildComponent styles="parent-style" /> </template>Componente hijo:
<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>