关于 vue <style>

101 阅读1分钟

scoped css

当标签有scoped属性时,它的css样式只作用于当前组件,父组件的样式无法参透到子组件 不过子组件的根节点会同时受 父组件的scoped css 和 子组件的 scoped css 影响

举例:

子组件设置scoped 并定义 scoped 和 inner 两个class:

image.png

父组件scoped中 修改子组件的样式:

image.png

结果:

image.png

根节点的 背景色被修改 inner中的背景修改失败 如果想修改 inner 中的样式需要 深度作用选择器

深度作用选择器

如果你希望scoped样式中的一个选择器能够被更深层次修改 你可以使用 >>> 操作符

将上面父组件样式内容修改为 如下所示: image.png 结果: image.png 深度选择器完成了 对scoped 子组件的修改 但这里有一个细节 style 标签中没有使用 lang="less" 原因是 这些预处理器无法正确解析 >>> 操作符 上述 代码加上 lang="less" 后结果:

image.png

image.png

这个时候你可以使用 /deep/符 代替:

/deep/

使用/deep/操作符 代码修改如下

image.png

成功:

image.png

本地 与 全局 混用

你可以在一个组件中同时使用 scoped 和 非 scoped 样式:

image.png

data-v-[hash]

当组件中有 含scoped 的style标签时 DOM结构上就会出现 data-v-[hash] 属性 这个属性实现了 局部作用域

image.png

如果当前组件只含有 全局 style:

image.png

DOM 展示为: image.png

当含有 scoped 时 (无论是否存在 与全局混用 )

image.png

DOM 展示为:

image.png

关于scoped 原理与 deep 穿透原理 可参考:

blog.csdn.net/weixin_4527…