关于在vue中父组件更改子组件的样式,而不影响子组件在其他组件的样式。
【关于在vue中父组件更改子组件的样式,而不影响子组件在其他组件的样式。】在项目中我遇到的问题:两个页面共用一个组件,比如要修改A页面的样式(包括A页面子组件的样式),但是为了不影响B页面的样式,所以通过查阅资料,通过以下方法完美解决。
方法:使用深度作用选择器 比如:>>> 和 /deep/ 这两个关键词用例:比如:在A页面修改子组件的body样式使用: >>> body{
background-color:red;
} 或者: /deep/ body{
background-color:black;
}区别:比如 Sass、less 之类的预处理器无法正确解析 >>> 操作符的时候。这种情况下你可以使用 /deep/ 操作符来代替它( /deep/ 是 >>> 的别名),同样可以达到效果的。
推荐阅读
- 你到家了吗
- 闲杂“细雨”
- 杜月笙的口才
- 赢在人生六项精进二阶Day3复盘
- 祖母走了
- 樱花雨
- 眼观耳听美食的日子
- vue-cli|vue-cli 3.x vue.config.js 配置
- “成长”读书社群招募
- 眉头开了