vue单页面工程化项目,解决组件中样式冲突

体会 scoped 属性的作用
以及 /deep/ 样式穿透
体验代码的变化

本实例的组件结构如下：

style样式中的 scoped属性

需求: 改变left组件中h1大标题的字体颜色

//而在Left的style样式中,没有 定义scoped属性 直接定义h1的字体颜色
<style lang='less'>
#left {
  width: 100%;
  height: 100%;
  background-color: skyblue;
}
h1 {
//为h1 增加颜色
  color: slateblue;
}
</style>

运行结果:

会发现所有的h1大标题文字颜色，被修改成了同left组件中 h1 color 的相同字体颜色 

**原因分析: **

① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

因此,所有的组件 style 样式,最后都会被加载到同一个 html 页面去渲染 html 页面的元素样式，
此时,当 left 组件中加的 h1 样式加载到 html 页面的时候,相当于一个全局的 h1标签选择器,
会选择到或影响到, 整个 html 页面中的 h1 元素 文字字体的颜色 
例子, 此时在源代码中查看 h1 标签渲染时的 选择器代码:
 						h1 {
						    color: slateblue;
						} 

解决方式: scoped

在 vue 组件中,在定义 style 的时候,可以加一个 scoped 的属性
例代码: 
          <style lang=" less " scoped>
               
          </style>
          
此时, 在  left 组建中, 更改 h1 的文字颜色的时候, scoped 属性发挥起了它的作用, 会给当前
left 组件中,每个 html 元素身上 加载一个 data-v-xxxx 的自定义属性,给哪个组件加 scoped 
就会给哪个组件的 ui 结构中自动添加 data-v 开头的随机不重复的自定义属性,此时,再进行
样式渲染的时候, h1 选择器,不光是选择 html 页面上的所有 h1 大标题, 而是会进行 h1 标签
再加上 data-v 开头的属性选择器来进行选择
例子,在 left 组件被渲染到 html 页面后, h1 标题的源代码 选择器 写法为:

    		  h1[data-v-3c83f0b7] {
    				color: slateblue;
			}          
				
就会单纯的渲染,此时 Left 组建中的 h1  而不会影响到其他相同标签的元素	

以上解决了,在某个组件中,想单纯的更改当前组件的颜色

style样式中的 /deep/ 样式穿透

需求, 只更改 left 组建中的 son 的 h1 大标题

在 style 上加了 scoped 属性之后, 想要更改其子组件中的样式的时候, 发现,渲染不到其
子组件中的元素
在 left 组建中, style 代码如下: 
   		<style lang='less' scoped>
				#left {
		  				width: 100%;
  						height: 100%;
  						background-color: skyblue;
				}
				// 想要改变子组件中的 h1标题
				h1 {
  						color: thistle;
				}
		</style>
运行结果: 发现只有 left 自身的 h1 元素被渲染了 而,son 组件没有改变 		

原因分析

  此时,查看子组件中 h1 标题的 结构发现,它的 h1 源码如下: 

如图,我们发现, 每个组件中的 scoped 自动生成的 自定义属性,每个组件都是不一样的,而通过上述我们知道,此时 left 组件中的 h1 渲染样式的结构为: 
   			 h1[data-v-3c83f0b7] {
    			color: thistle;
		     }
这样进行属性选择器来渲染的, 而 子组件 son 上并没有 left 组件自动生成的自定义属性，因此 son 中的
h1就没有办法，被选中进行渲染 

解决办法: /deep/

 /deep/用法如下代码:
          <style lang='less' scoped>
				#left {
				     width: 100%;
 				     height: 100%;
  					 background-color: skyblue;
				}
			// 想要改变子组件中的 h1标题
			    /deep/ h1 {
 						 color: thistle;
			    }
	      </style> 
添加完后,我们运行,查看结果为下图	      

分析结果

  如上图发现， 最后的运行结果,只有 left 组件中 h1 标题和想渲染到 son 组件中的
  h1 成功被渲染。
  原因: 此时，我们来查看源码, 会发现, 加上 /deep/ 后,left 中 h1 选择器 发生了变化
  例代码: 
             [data-v-3c83f0b7] h1 {
   				 color: thistle;
			}
综上代码，我们发现, 此时的选择器为,当前组件中 后代的 h1 被选中及被渲染成指定的字体颜色 			

在我们查看源码的时候注意,浏览器中的代码层级关系哦

基本上是一些源码上的比较,及总结的白话结论,需要更多的耐心诺~(╹▽╹)