用法

  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为开头，这样可以做到在全局环境中使用组件的单独样式，

版权属于：小小窝/禾下月

本文链接：https://hxyxyz.top/index.php/Web/325.html

本站文章采用 知识共享署名4.0 国际许可协议 进行许可，请在转载时注明出处及本声明！