vue cli23搭建的项目,父组件加scoped后样式在子组件还生效,怎么使样式只在当前组件生效?

点击联系发帖人 时间：2019-08-05 07:58

vue-cli3

在vue的开发中我们需要引用子，包括ui组件（element、iview）但是在父组件中添加scoped之后，在父组件中书写子组件的样式是无效果的去掉scoped之后，样式可以覆盖但这样会污染全局样式，为了解决这个问题vue-loader新增书写方式。

 

 这样的写法及修改了子组件的样式又不会污染全局样式！
 
 

 
 

 
 

 
 

 
 

 
 

 在使用 vue 的开发中，我们有时会引用外蔀组件包括 UI 组件（ElementUI、iview）。
 
 

 
 

 
 

 你可以在一个组件中同时使用有作用域和无作用域的样式：


我们把 需要修改子组件的样式 写在上面那个全局样式里面

如果你希望scoped样式中的一个选择器能够作用得“更深”例如影响子组件，你可以使用>>> /deep/操作符：


有些像 SASS 之类的预处理器无法正确解析>>>这种情况下你可以用/deep/操作符取而代之 —— 这是一个>>>的别名，同样可以正常工作


OK，主要内容就是以上几点

1、通过 v-html 创建的 DOM 内容不受作用域内的样式影响，但是你仍然可以通过深度作用选择器来为他们设置样式

3、在递归组件中小心使用后代选择器

}

在使用 vue 的开发中我们有时会引鼡外部组件，包括 UI 组件（ElementUI、iview）

但是在父组件中添加 scoped 之后，父组件的样式将不会渗透到子组件中所以在父组件中书写子组件的样式是无效果的。

【因为我们知道正确使用全局样式的姿势是使用一个全局的 app.css】

你可以在一个组件中同时使用有作用域和无作用域的样式：

我们把需要修改子组件的样式写在上面那个全局样式里面

OK主要内容就是以上几点。

需要额外补充的是：
1、通过 v-html 创建的 DOM 内容不受作用域内的样式影响但是你仍然可以通过深度作用选择器来为他们设置样式
3、在递归组件中小心使用后代选择器

}

scoped看起来很好用，当时在Vue项目中当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播)，需要在局部组件中修改第三方组件库样式而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped

}

天天发财游戏网

vue cli23搭建的项目,父组件加scoped后样式在子组件还生效,怎么使样式只在当前组件生效?

我要回帖

更多关于 vue-cli3 的文章

更多推荐