Vue.js——CSS作用域那些事儿

时间：2023-03-31 23:29:43 vue.js

#app{.out-box{宽度：200px；高度：200px；背景色：#faa；}}前言首先，让我们回顾一下“CSS作用域”的概念。它的本质是让每一个选择器都成为一个“独一无二”的存在，这样作用域就自然而然地形成了。说到《Vue》中的“scopedCSS”，我想大家应该第一时间想到的是scopedCSS以作用域的方式形成的。不过，值得一提的是，“Vue”还支持一种“scopedCSS”，即“CSSModule”。说到“CSSModule”，大家会有些陌生。相信很多同学在日常开发中都会使用scoped在“Vue”组件中实现“scopedCSS”。那么，今天我们就来详细了解一下这两者。1、scoped作用域“scopedscope”是“vue”通过“postcss”实现对scoped标签中定义的每个选择器的特殊作用域标识，例如：#app{.out-box{宽度：200px；高度：200px；背景色：#faa；}}logo显示在页面上：

可以看到，本质上是在原来的“selector”的基础上，通过“postcss”添加了一串attr。而且，在我们平时的开发中，一个很常见的场景是，我们在使用一些已有的组件或者第三方组件的时候，需要对原有组件的样式做一些细微的改动。那么这个时候就需要使用穿透来实现样式的变化，例如：需要注意的地方这里>>>只是一种渗透方式，并不是所有的场景都可以用>>>来实现。比如“iView”需要使用/deep/方法，“ElementUI”需要使用::v-deep方法。2、相对于“scopedscope”，“CSSModelscope”的能力更强，所以内容也相对多一些。什么是CSSModule“CSSModule”是指将一个定义好的“CSS”文件作为一个变量导入，然后通过这个变量对“HTML”中的元素进行样式化，例如：a.css。框{宽度：100%；高度：100%；背景色：#afa;}b.jsimportstylefrom'./a.css'constboxElem=document.createElement('div');boxElem.className=style。box然后渲染到页面时，它对应的HTML会是这样的：是“CSS模块”形成作用域的地方。值得一提的是，“CSSModule”还有其他的能力，比如可以定义一个全局的“选择器”，会这样写：:global(.title){color:green;}接下来使用和局部的相同的。至于其他的用法，有兴趣的同学可以去GitHub自行阅读CSSModule在Vue中的应用。回到我在这篇文章中所说的，“Vue”中也支持“CSSModule”。在给标签添加module属性时，“Vue”会在当前“组件实例”上注入一个计算属性$style，然后我们就可以使用我们通过$style定义的“selector”，例如：HelloWorld.vue.inner-box{宽度：100px;高度：100px；background-color:#aaf;}然后，当它呈现到页面时，它的HTML将如下所示：

然后，此时，回到和“scoped”同样的问题，我用“CSSModule”来定义组件的样式，那么我在使用的时候怎么重写呢？标准答案是没有覆盖“CSSModule”，有的只是为一个组件设置了不同的主题。但是，如果真的需要做，只能在module对应的style标签中定义自己需要的style，然后根据传入组件的props动态绑定class。然后，为组件设置主题，我们需要设计组件，为这个组件预留props，将props添加到$style中，然后在这个组件中对应的元素中使用，例如：Box.vuecomponent<模板>