vue使用less识的scoped属性
在vue项目中如果使用less样式,会有一个scoped属性,scoped属性的具体作用我们要清楚,不要盲目使用
·
scoped可以实现style只作用于当前的.vue文件
【scoped=>译:审视,仔细研究(scope的过去式与过去分词形式);】
<template>
<div class="user"></div>
</template>
<script>
</script>
<style lang='less' scoped>
.user {
color:#333;
}
</style>
上面的文件渲染出的dom结构会是这样的
<div data-v-53795c54 class="user"></div>
然后渲染出来的css样式是这样的;
.user[data-v-53795c54] {
color:#333;
}
如果我们子组件添加scoped,同样的,如果子组件也用scoped标识了,那么在父组件中是不能设置子组件中的节点的;
若父组件有scoped,子组件没有设置,同样,也是不能在父组件中设置子组件的节点的样式的,因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了,不会作用与其他的组件样式;
更多推荐
已为社区贡献2条内容
所有评论(0)