vue⾥⾯⽗组件修改⼦组件样式的⽅法
在使⽤ vue 的开发中，我们有时会引⽤外部组件，包括 UI 组件（ElementUI、iview）。
当 <style> 标签有 scoped 属性时，它的 CSS 只作⽤于当前组件中的元素。
但是在⽗组件中添加 scoped 之后，⽗组件的样式将不会渗透到⼦组件中，所以在⽗组件中书写⼦组件的样式是⽆效果的。
⼀、去掉 scoped
在⽗组件的 <style> 中去掉 scoped 后，⽗组件中可以书写⼦组件的样式，但是你会担⼼这样会污染全局样式。
【因为我们知道正确使⽤全局样式的姿势是使⽤⼀个全局的 app.css】
⼆、混⽤本地和全局样式
你可以在⼀个组件中同时使⽤有作⽤域和⽆作⽤域的样式：
<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>
我们把需要修改⼦组件的样式写在上⾯那个全局样式⾥⾯
三、使⽤深度作⽤选择器
如果你希望 scoped 样式中的⼀个选择器能够作⽤得“更深”，例如影响⼦组件，你可以使⽤ >>> 操作符：
<style scoped>
.a >>> .b {
/* ... */
html富文本框
}
</style>
有些像 SASS 之类的预处理器⽆法正确解析 >>>。这种情况下你可以⽤ /deep/ 操作符取⽽代之 —— 这是⼀个 >>> 的别名，同样可以正常⼯作。
OK，主要内容就是以上⼏点。
需要额外补充的是：
1、通过 v-html 创建的 DOM 内容不受作⽤域内的样式影响，但是你仍然可以通过深度作⽤选择器来为他们设置样式
2、CSS 作⽤域不能代替 class
3、在递归组件中⼩⼼使⽤后代选择器
以上这篇vue⾥⾯⽗组件修改⼦组件样式的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。