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的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！