在这里记录一下Vue3.0
里面的样式隔离特性,在项目开发过程当中,有时候将样式单独提到了一个文件当中再引入到单组件文件
当中,会导致没有样式隔离
。
这里阅读Vue官方文档找到了解决办法。
一、scoped
我们了解到的最常见就是scoped,主要的原理是通过通过 PostCSS
为元素添加自定义属性(data-xxx-xxx
),它的形式如下:
<style scoped>
.example {color: red;
}
</style><template><div class="example">hi</div>
</template>
编译后的形式:
<style>
.example[data-v-f3f3eg9] {color: red;
}
</style><template><div class="example" data-v-f3f3eg9>hi</div>
</template>
1.1 深度选择器
形式::deep()伪类
作用:父组件的样式能够影响到子组件
1.2 插槽选择器
形式::slotted()伪类
作用:组件样式可以影响到插槽插入的元素样式
1.3 全局选择器
形式::global()伪类
作用:组件样式可以应用到全局
1.4 混合使用局部与全局样式
<style>
/* 全局样式 */
</style><style scoped>
/* 局部样式 */
</style>
二、CSS Modules
Vue会将一个 \<style module>
标签会被编译为 CSS Modules
并且将生成的 CSS class 作为 $style
对象暴露给组件:
<template><p :class="$style.red">This should be red</p>
</template><style module>
.red {color: red;
}
</style>
得出的 class 将被哈希化
以避免冲突,实现了同样的将 CSS 仅作用于当前组件
的效果。
CSS Modules
css 模块化
指的是就是:用url()
或者@import
导入的文件
在我们现在的构建工具里面,几乎都支持了对CSS Modules
的处理,只要将文件命名改为xxx.module.css
就可以,如果有预处理器
改成相对应的名称即可。
三、CSS 中的 v-bind()
单文件组件的 <style> 标签支持使用 v-bind CSS 函数将 CSS 的值链接到动态的组件状态:
<template><div class="text">hello</div>
</template><script>
export default {data() {return {color: 'red'}}
}
</script><style>
.text {color: v-bind(color);
}
</style>
这个语法同样也适用于 <script setup>,且支持 JavaScript 表达式 (需要用引号包裹起来):
<script setup>
const theme = {color: 'red'
}
</script><template><p>hello</p>
</template><style scoped>
p {color: v-bind('theme.color');
}
</style>
实际的值会被编译成哈希化的 CSS 自定义属性,因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上,并且在源值变更的时候响应式地更新。