::v-deep的理解

vue样式穿透

在刚开始使用element-ui组件库时，想要修改其内部的样式，但总是不生效，通过查询资料，了解到了深度作用选择器。

如果希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，可以使用 >>> 操作符：

<style scoped>
.a >>> .b{
	width:100%;
	height:100%;
	background:red;
}
</style>

但是像scss等预处理器却无法解析 >>>，所以我们使用下面的方式：

<style>
.a{
 	/deep/ .b { 
  		width:100%;
  		height:100%;
  		background:red;
 	}
} 
</style>

但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。此时我们可以使用第三种方式：

<style lang="scss" scoped>
::v-deep .a .b{
	width:100%;
	height:100%;
	background:red;
}
</style>

所以在想要修改element-ui的样式时，可以通过深度作用选择器来选中样式对其进行样式修改。

由于最开始了解::v-deep是因为需要修改element-ui的样式，所以以为::v-deep仅仅是为了解决element的样式而出现的，但实际上在其他很多地方也是大有作用的。

这周的项目中从后端请求出来的接口的结果是带有html结构的字符串，那么我需要渲染在页面上就必然需要用到v-html来进行解析，然而我对其解析出来的元素设置样式的时候却没法生效。

原因是：在单文件组件中，带有 scoped 属性的 styles 不会作用于 v-html 里的内容，因为 v-html 里面的内容，并没有经过 Vue’s template compiler 的处理。这时候可以去掉scoped样式即可生效，但是这种方法是不好的，因为取消了scoped属性就会污染全局变量，那么这时候使用deep选择器就是一种很好的解决办法啦~

<template>
	<div class="content-html" v-html="data"></div>
</template>
<style>
::v-deep .content-html p{
	width:100%;
	height:100%;
	background:red;
}
</style>