1. scoped的作用
scoped style最初是一个html5的特性, scoped主要作用于vue中style部分。加上scoped后,最终生成的dom和style都会被加上一个唯一
的动态属性,所以其样式只会对当前组件有效,不会污染全局样式。如下图所示:
<style lang="scss">
.login {
background: url('~@/assets/images/bg.png') no-repeat;
background-size: cover;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.login-form {
max-width: 380px;
}
}
</style>
如果没有加scoped,浏览器渲染结果如下:
加上了scoped,可以看到渲染效果如下:
其实可以发现组件渲染时会有一个data-v-hash属性,说明加了scoped有以下作用:
(1)dom会被添加上一个唯一的属性值,生成的style样式也会使用该属性作为属性选择器设置样式, 这样使得样式只对该组件有效,避免了全局样式污染;
(2)每个组件内的dom标签都会被设置上同一个data属性值;
2. deep的作用
考虑在使用scoped的父组件中如何修改子组件样式?
想要修改子组件的内层元素样式,就需要使用/deep/了,/deep/是less中深度选择器的>的另一种写法,只是因为>在vue模板中不能正常解析,所以用/deep/代替。
<style lang="less" scoped>
.parent {
color: bule;
h1 {
font-size: 30px;
}
/deep/ .child {
font-size: 20px;
.author {
color: orange;
}
}
}
</style>