vue里面给style标签添加scoped属性之后，css只会作用于当前组件中的元素。
但是这次项目里面出现了父组件的样式影响了子组件的样式。
父组件
<style scoped> .test{color: #f00;} </style>
子组件
<template> <div class="test"> 测试父组件样式影响子组件 </div> </template>
此时，子组件里面的文字颜色也变为红色了；
Vue Loader里面有一句
使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式
vue里面给style标签添加scoped属性之后，css只会作用于当前组件中的元素。 但是这次项目里面出现了父组...
vue当中的style标签使用scoped时,修改子组件的样式是不起作用的,把scoped去掉后又会影响到别的组件...
在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加 ，这样父组件中如果有跟子组件相同的cl...
子组件： 父组件 使用 scoped 后，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件...
/deep/ 深度选择器 在vue中，我们为了避免父组件的样式影响到子组件的样式，会在style中加 ，这样父组件...
【Vue】 element ui 引入第三方图标vue组件样式添加scoped属性之后，无法被父组件修改。或者无法...
在组件中需要使用本地样式，即scoped样式文件。在该文件中，父组件无法修改子组件的样式，选择器只能找到子组件的根...
使用scoped后，父组件的样式将不会渗透到子组件如果想在使用了scoped不污染全局样式的情况下，依然可以修改子...
vue scoped 深度作用选择器 如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，...
一、 scoped的作用： 使当前组件的样式不会和其它组件冲突 二、注意事件： 1、使用 scoped 后，父组件...
本文标题：vue scoped父组件影响子组件样式
本文链接：https://www.haomeiwen.com/subject/wmwzvqtx.html
网友评论