介绍
今天就跟大家聊聊有关Vue中范围的实现原理是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>何为作用域?
在Vue文件中风格的标签上,有一个特殊的属性:范围。当一个风格标签拥有范围属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有风格标签全部加上了范围,相当于实现了样式的模块化。
<>强范围的实现原理
Vue中的范围属性的效果主要通过PostCSS转译实现,如下是转译前的Vue代码:
& lt; style scoped>
.example {
,颜色:红色;
}
& lt;/style>
& lt; template>
,& lt; div 类=癳xample"祝辞hi
& lt;/template>
转译后:
& lt; style>
.example(数据- v - 5558831), {
,颜色:红色;
}
& lt;/style>
& lt; template>
,& lt; div 类=癳xample",数据- v - 5558831 - a> hi
& lt;/template> 即:PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom。
<强>为什么需要穿透作用域?
范围看起来很美,但是,在很多项目中,会出现这么一种情况,即:引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除范围属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透范围。
& lt; style scoped>
,外层,在祝辞祝辞,第三方组件,{
样才能式
,}
& lt;/style> 通过在祝辞祝辞可以使得在使用范围属性的情况下,穿透作用域,修改其他组件的值。
<强>曲线救国的方法
其实,还拥有一种曲线救国的方法,即在定义一个含有范围属性的风格标签之外,再定义一个不含有范围属性的风格标签,即在一个vue组件中定义一个全局的风格标签,一个含有作用域的风格标签:
& lt; style>/*,global styles */& lt;/style>
& lt; style scoped>/*,local styles */& lt;/style> 看完上述内容,你们对Vue中范围的实现原理是什么有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。
