vue scope的用法和添加全局样式

用法

  scope是实现组件的私有化,不对全局造成样式污染,表示当前style属性只属于当前模块。

scope的渲染规则

  1. 给HTML的DOM节点加一个不重复data属性(形如:data-v-2311c06a)来表示他的唯一性
  2. 在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-2311c06a])来私有化样式
  3. 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性

添加全局样式

改变引入组件的样式

  虽然使用scope能够避免当前样式污染全局,但是有时候我们需要更改引入项目里的组件样式,所以就需要使用深度选择器:>>> ,或者在某些预编译器不能使用该符号,可以使用/deep/ 或 ::v-deep来改变引入组件的样式

less使用/deep/ 
<style lang="less" scoped>

.searchforminline-out {

/deep/ input{

width: 50px;

}
</style>

另外一种改变全局样式的方法

保持原来的<style lang="less" scoped> 不变,再添加一个<style></style>
在里面修改全局样式

改变app外层div的样式 如 body

  因为scope的原因,我们在组件内部的style里是改变不了app外层的div的样式,如body。

如果我们要改变body,我们可以在mount阶段给body添加clas,来改变样式

<style lang="less" scoped>
.body{
    body{
        background-color:red;
    }
}
</style>
document.body.classList.add()

为了不影响其他页面的全局样式,我们可以在离开该组件,在beforeDestroy时,删除该class

beforeDestroy(){
document.body.classList.remove()
}

不使用scope 来做到组件样式不污染全局

  即给每个组件都在外层套上一层div,设置唯一的class,在组件里写样式,即适用div的class为开头,这样可以做到在全局环境中使用组件的单独样式,

hxy

hxy

秦 夏

留下你的评论

快留下你的小秘密吧