Vue-Scoped CSS
【摘要】 Vue-Scoped CSS考必过小编为大家整理了关于Vue-Scoped CSS的信息，希望可以帮助到大家！
Vue-Scoped CSS
标签：sha添加pnbsp字段注意事项文件dashbsp
一，什么scoped？
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化
二，实现原理
当<style>标签有scoped属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。它通过使用 PostCSS 来实现以下转换：
<style scoped>
.example {
color: red;
}
</style>
<template>
<p class="example">hi</p>
</template>
转换结果：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<p class="example" data-v-f3f3eg9>hi</p>
</template
由此可知，添加scoped属性的组件，为了达到不污染全局，做了如下处理：
给HTML的DOM节点加一个不重复属性data-v-f3f3eg9标志唯一性
在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段，实现类似于“作用域”的作用，不影响全局
如果组件内部还有组件，只会给最外层的组件里的标签加上唯一属性字段，不影响组件内部引用的组件（ 注意 ）
三，常见问题
1，如果组件中也引用其他组件，只会给最外层的组件里的标签加上唯一属性字段，不影响组件内部引用的组件，所以会出现在scoped中设置内部组件的样式无效
如图，在class="modelManage"使用了element-ui 的dialog组件，在scoped中设置样式无效
四，解决办法
1，混用本地样式与全局样式
你可以在一个组件中同时使用有 scoped 和非 scoped 样式：
<style>
/* 全局样式 在样式的前面，加上一个特定作用的类，起到私有的作用 */
.modelManage .el-dialog {
width: 12rem;
height: 8rem;
}
</style>
<style scoped>
/* 本地样式 */
</style>
2，深度作用选择器
如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用>>>操作符：
<style scoped>
.modelManage >>> .el-dialog {
width: 12rem;
height: 8rem;
}
</style>
有些像 sass ,less之类的预处理器无法正确解析>>>。这种情况下你可以使用/deep/或::v-deep操作符取而代之——两者都是>>>的别名，同样可以正常工作。
Vue-Scoped CSS
标签：sha添加pnbsp字段注意事项文件dashbsp
以上就是Vue-Scoped CSS的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！