关于在vue中父组件更改子组件的样式,而不影响子组件在其他组件的样式。

【关于在vue中父组件更改子组件的样式,而不影响子组件在其他组件的样式。】在项目中我遇到的问题:两个页面共用一个组件,比如要修改A页面的样式(包括A页面子组件的样式),但是为了不影响B页面的样式,所以通过查阅资料,通过以下方法完美解决。

方法:使用深度作用选择器 比如:>>> 和 /deep/ 这两个关键词用例:比如:在A页面修改子组件的body样式使用: >>> body{ background-color:red; } 或者: /deep/ body{ background-color:black; }区别:比如 Sass、less 之类的预处理器无法正确解析 >>> 操作符的时候。这种情况下你可以使用 /deep/ 操作符来代替它( /deep/ 是 >>> 的别名),同样可以达到效果的。

    推荐阅读