浅谈Vue的style scoped
style scoped的作用在使用Vue-Cli 开发时,我们都知道,在组件的<style></style>加上 scoped属性,可以让<style></style>里的样式只在当前组件生效。那,这是如何实现的呢?Vue 对 scoped的渲染规则对于所有的 Vue 组件,只要设置了<style scoped></st...
style scoped
的作用
在使用Vue-Cli 开发时,我们都知道,在组件的<style></style>
加上 scoped
属性,可以让<style></style>
里的样式只在当前组件生效。
那,这是如何实现的呢?
Vue 对 scoped的渲染规则
- 对于所有的 Vue 组件,只要设置了
<style scoped></style>
,Vue就会给该组件生成一个唯一data值。 - Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点
- 如果组件内部包含子组件,这有两种情况
- 情况一:子组件没有设置
<style scoped></style>
,则只会给子组件的最外层标签加上当前组件的data属性 - 情况二:子组件设置了
<style scoped></style>
,则子组件会自动生成一个自己的唯一data值,然后子组件最外层标签在自己的data属性后面添加父组件的data属性。
- 情况一:子组件没有设置
- 对于组件内写在
<style scoped></style>
里的样式,Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。
基于上面四点,Vue就实现的scoped
的功能。因为,组件scoped
里的样式都加了当前组件的唯一标识data属性。也就是说,即使当前组件的class跟其他组件重名,因为每个组件的data属性不一样,当前组件的样式也就不能再其他组件生效了。
渲染规则证明:
-
规则一:对于所有的 Vue 组件,只要设置了
<style scoped></style>
,Vue就会给该组件生成一个唯一data值。对于这一点的证明,很容易。我们知道,一般的,Vue 入口文件
App.vue
里的样式是默认全局样式的,也就没有添加<style scoped></style>
。所以,编译出来的结果如下图:
那在<style></style>
添加scoped
属性后呢?
可见App.vue
编译后,增加里data属性。由此可知,组件的data属性存在是依据scoped
来控制的。
-
规则二:Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点
-
规则三:如果组件内部包含子组件,这有两种情况
情况一:子组件没有设置
<style scoped></style>
,则只会给子组件的最外层标签加上当前组件的data属性情况二:子组件设置了
<style scoped></style>
,则子组件会自动生成一个自己的唯一data值,然后子组件最外层标签在自己的data属性后面添加父组件的data属性。
规则二、三结合来证明:
用上面的例子来证,展开App.vue
组件得:
App.vue
全部HTML的DOM标签都添加的data属性。
仔细看上图,我们发现,<div class="home"></div>
标签有两个data属性而且App.vue
的data属性在后面。这是应为该标签为Home.vue
的最外层标签,而且也添加<style scoped></style>
。如下图:
由此可证,子组件设置了<style scoped></style>
,则子组件会自动生成一个自己的唯一data值,然后子组件最外层标签在自己的data属性后面添加父组件的data属性。
去掉Home.vue
的<style scoped></style>
后,编译结果如下:
<div class="home"></div>
标签的data属性只剩下App.vue
的了。所以可证,子组件没有设置<style scoped></style>
,则只会给子组件的最外层标签加上当前组件的data属性
- **规则四:**对于组件内写在
<style scoped></style>
里的样式,Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。
对于这一点,我们直接看控制台可知:
参考文献
更多推荐
所有评论(0)