1 Scoped属性作用
当 <style>
标签设置 scoped
属性后,它的 CSS 只作用于当前组件中的元素(本地和全局的概念).情况如下:
使用 scoped
后,父组件的样式将不会渗透到子组件中。
不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响(所以有时候给子组件设置的属性会发现不起作用)。
在vue官方文档的vue-loader中看到如下解决方法:
2 解决方案
2.1 页面中混用本地和全局样式
一个组件中同时使用有 scoped 和非 scoped 样式.这个思路挺绝.
<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>
借助这种思路,其实也可以把一些子组件的一些属性设置到全局属性中,这样一些不起作用的属性会因为全局设置起作用,不过后期维护会比较乱,还是不太建议把子组件的样式突兀的放到全局中!!!
2.2 借助深度作用选择器<Deep>
如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>
操作符:
<style scoped>
.a >>> .b { /* ... */ }
</style>
有些像 Sass 之类的预处理器无法正确解析 >>>
。这种情况下你可以使用 /deep/
或 ::v-deep
操作符取而代之——两者都是 >>>
的别名,同样可以正常工作。
::v-deep .liList {
list-style-type: none;
padding: 3px;
}
使用了::v-deep后,可能还不起作用,是可能受到了less或scss的影响,不能在层级嵌套中使用.
3 一些错误:/deep/语法报错并且无法启动项目解决
同时一些使用了/deep/
的程序可能会报错:
原因:因为使用了less或scss的原因
解决方法:利用::v-deep代替/deep/