1.vue组件中的样式如果没加scrped，样式代表的是全局样式（避免组件之间样式的冲突）。加了属性代表是模块化的。

其他组件引用button组件

上面分析了单个组件渲染后的结果,那么组件互相调用之后会出现什么样的结果呢？，具体分两种情况：模块一般组件引用模块私有组件（本质和模块私有组件引用模块一般组件一样）；模块私有组件引用模块私有组件。

举个例子：在组件content.vue中使用了button组件，那么content.vue组件是否添加scoped属性渲染出来的结果有什么区别呢？

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//content.vue
<template>
  <div class="content">
    <p class="title"></p>
    <!-- v-button假设是上面定义的组件 -->
    <v-button></v-button>
  </div>
</template>
...
<style>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
  .content .button{
    border-raduis: 5px;
  }
</style>

模块一般组件（未添加scoped）引用模块私有组件

如果style上没有加scoped属性，那么渲染出来html和css分别就是：

?
1
2
3
4
5
6
7
<div class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <div data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </div>
</div>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content{
  width: 1200px;
  margin: 0 auto;
}
.content .button{
  border-raduis: 5px;
}

可以看出，虽然在content组件中，修改了button的border-raduis属性，但是由于权重关系，生效的依然是组件内部的样式（此时是外部的样式被覆盖）。所以如果要达到修改样式的目的，就必须加重我们要修改样式的权重（增加选择器层级，ID选择器，并列选择器，impotant等）

模块私有组件（添加scoped）引用模块私有组件

如果加了scoped属性呢？按照开始分析出来的规则（事实也是这么的）：

首先是在所有的DOM节点加上data属性

然后在css选择器尾部加上data属性选择器

那么渲染出来html和css分别就是：

?
1
2
3
4
5
6
7
<div data-v-57bc25a0 class="content">
  <p data-v-57bc25a0 class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <div data-v-57bc25a0 data-v-2311c06a class="button-warp">
    <button data-v-2311c06a class="button">text</button>
  </div>
</div>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content[data-v-57bc25a0]{
  width: 1200px;
  margin: 0 auto;
}
.content .button[data-v-57bc25a0]{
  border-raduis: 5px;
}

对于上面的两种情况，可以明显看出来渲染后的结果大不相同。

虽然我们在content添加了想要修改button组件的样式的代码，但是仔细看，由于.content .button这句在末尾加的是content组件的scoped标记，最后这句其实根本作用不到我们想要的DOM节点上，所以这种情况我们在content内部写的任何样式都不会影响到button.vue组件，所以这就尴尬了。。。。

当然这个问题也是可以解决的，就是直接加全局样式可以修改到，但这势必会影响全部地方的组件；所以需要另外一种方法在content.vue组件内再加一个不带scoped属性的style标签，也就意味着要加两个style，一个用于私有样式，一个用于共有样式。这肯定是有点shit的，并且这两种解决方案都回避不了一个问题：权重！！！

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//content.vue
<template>
  <div class="content">
    <p class="title"></p>
    <!-- v-button假设是上面定义的组件 -->
    <v-button></v-button>
  </div>
</template>
...
<style scoped>
  .content{
    width: 1200px;
    margin: 0 auto;
  }
</style>
<style>
  .content .button{
    border-raduis: 5px;
  }
</style>

这样符合规范么？貌似没看到不能这么写，并且这么写也确实生效了。。。但这样确实增加了思维的复杂度，有点苦恼啊。

2.

总结一下scoped三条渲染规则

  1. 给HTML的DOM节点加一个不重复data属性(形如：data-v-2311c06a)来表示他的唯一性
  2. 在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-2311c06a]）来私有化样式
  3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

转载于:https://www.cnblogs.com/huancheng/p/9120417.html

vue组件样式scoped相关推荐

  1. vue组件样式穿透种类 /deep/ ::v-deep ＞＞＞。the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() in

    vue组件样式穿透种类 /deep/ ::v-deep >>> vue项目打包时警告:the >>> and /deep/ combinators have bee ...

  2. Vue 组件 style scoped

    预防各个组件中的css样式出现相同的名称 而导致混乱. 例如 <style>.demo{background-color: #ffaa00;.h {font-size: 20px;colo ...

  3. vue 组件不受全局样式影响_Vue 组件之间样式冲突

    Vue 组件之间样式冲突 vue 组件化,各组件内都可以在 style 部分写样式,这些样式却不是相互独立的,最终组合在一起,难免就会产生样式的污染. 首先来看一下两个 vue 组件代码: 1.Par ...

  4. scoped 不生效_.vue文件 加scoped 样式不起作用的解决方法

    浅谈关于.vue文件中的style的scoped属性 注意:scoped作用:使得.vue中的样式不影响其他.vue组件样式,而不是scoped使得.vue组件样式不受外样式影响. 1.在vue组件中 ...

  5. vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  6. vue修改html片段的样式无效,vue 组件中添加样式不生效的解决方法

    如何产生 在开发项目中遇到在组件中添加样式不生效的情况.具体场景如下 vue 组件 //我用js在上面div标签中插入一个 text goes here export default { ... mo ...

  7. scoped父组件，如何控制子组件样式 - 方法篇

    scoped父组件,如何控制子组件样式 - 方法篇 需求场景: 在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机 ...

  8. 如何在scoped不污染组件样式的前提下，实现el-input组件样式覆盖？

    如何在scoped不污染组件样式的前提下,实现el-input组件样式覆盖? 讲述:关于在使用elementUI开发项目中,需要结合需求修改样式的问题? 踩了个坑,无论怎么修改样式的权重,都无法覆写e ...

  9. Vue 中英文 组件 样式 写法

    Vue 中英文 组件 样式 写法 Vue 项目国际化样式处理 一.全局(main.js)添加自定义指令: v-lang 会自动添加 语言对应的 class [中:zh,英:en] Vue.direct ...

最新文章

  1. ubuntu下安装2个mysql_Linux 同一系统安装两个MySQL
  2. struts2--java.lang.IllegalAccessException: Class ognl.OgnlRuntime can not access a member of
  3. PYTHON学习0011：enumerate()函数的用法----2019-6-8
  4. java pgsql connection 是否可同时执行sql_Java教程:解读JDBC是什么
  5. Java-Set、Map
  6. 人工智能究竟会不会让程序员失业？
  7. 《Web测试囧事》——1.3　测试Web Service能否正常提供JSON数据
  8. 汉字Unicode编码规范
  9. C/C++预处理过程详细梳理（预处理步骤+宏定义#define/#include+inline函数+宏展开顺序+条件预处理+其它预处理定义）
  10. 最全的ios系统导出微信聊天记录生成词云教程
  11. MySQL性能瓶颈排查
  12. 相似矩阵和相似对角化
  13. java中exec命令,关于进程：Java exec linux命令
  14. 新猿木子李：0基础学python培训教程 html简介
  15. Java使用aspose生成简历
  16. Nature 曹云龙/谢晓亮等破解新冠病毒趋同进化机制，将为抗新冠病毒添新药！...
  17. android id如何修改密码,小编教你忘记Apple ID密码怎么办？以及如何修改密码
  18. java utf8无bom格式_关于java：编写没有BOM的UTF-8
  19. 两台主机的vmware虚拟机相互连通
  20. 数据分析——用tableau制作动态可视化数据仪表盘

热门文章

  1. 使用第三方登录百度网盘时提示“由于网络原因无法载入页面 请点击刷新后重试”
  2. 日语学习 「バージョン」 version　と　「リビジョン」　revision
  3. 【Oracle】Rman简介
  4. 在使用pydelicious时出现HTTP Error 500: Internal Server Error的错误的解决方法：
  5. win10想说爱你不容易——安装.net3.5也是一个坑（已有完美解决方法）
  6. IIS配置Url重写实现http自动跳转https的重定向方法(100%解决)
  7. Vue+element 解决浏览器自动填充记住的账号密码问题
  8. 为什么更改总和顺序会返回不同的结果？
  9. 常数0.0039215689代表什么？
  10. @ Before，@ BeforeClass，@ BeforeEach和@BeforeAll之间的区别