::v-deep的使用（CSS深度作用选择器）的实际应用

使用 deep scoped 可以实现对样式应用的修改，不必选择全局样式污染样式

1、常规使用

        在 vue 项目的开发过程，使用了 ElementUI 组件且样式 style 使用了 scoped 属性，当想要修改组件样式，发现直接修改不了，需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式，针对这种情况，可以使用深度作用选择器（即样式穿透）

<style lang="scss" scoped>
.editor-slide-upload {
  margin-bottom: 20px;
  ::v-deep .el-upload--picture-card {
    width: 100%;
  }
}
</style>

2、在v-html中使用深度选择器对其中的样式进行设定

// html
<div class="editor-content" v-html="content" />

// script
data() {
	return {
		content: `<div class="content">
		<div class="title">传统的组件之间的共享数据方式</div>
		<ul>
			<li>父向子传值： v-bind</li>
			<li>子向父传值：v-on</li>
			<li>兄弟组件之间共享数据：EvenBus</li>
			<li>$on 接受数据的那个组件</li>
			<li>$on 接受数据的那个组件</li>
			<li>$emit 发送数据的那个组件</li>
		</ul>
	</div>`,
	};
},

// css
<style lang="scss" scoped>
.editor-content {
	::v-deep .content {
		.title {
			font-size: 20px;
		}
		ul li {
			font-size: 12px;
		}
	}
}
</style>

3、在字符串模板中编写的CSS样式可以使用深度选择器进行设定

// script
divStr = `
<div class="point" >
    <div class="pointTop" >${item.name}</div>
    <div class="pointBottom">
        <div class="item"> <span>日处理量</span><span class="time">${item.dealNum} 吨</span>        
        </div>
        <div class="item"> <span>污水处理率</span><span class="time">${item.dealRate}%</span></div>    
    </div>
</div>`;

// css
<style lang="scss" scoped>
.pollutionMap {
  ::v-deep {
    .point {
      
  }
}
</style>