利用v-html给页面添加内容

当后端给你返回一个包含富文本的内容时，你应该使用v-html来进行加载，比如说下面这样：

<!-- 这样写上之后，就会在div标签里面加载返回来的富文本内容 -->
<div class='father-box' v-html="item"></div>

当我们需要给加载的富文本内容增加css样式的时候该怎么做呢？

这里引入上中下三策来做到增加css样式

去掉<style scoped>中的scoped
因为通过scoped属性，可以使得组件之间的样式不互相污染，如果增加上去之后就没有办法进行css样式增加了，如下：
```
<style lang="scss">
	.father-box{
		background: blue;
		
		.son-box{
			background: red;
		}
	}
</style>
```
但是，这样会导致css样式污染，所以不可取，此为下策。
定义两个<style>标签，一个含有scoped属性，一个不含有scoped属性
这样可以避免css样式污染，同时也可以为加载的富文本内容增加样式，如下：
```
<style lang='scss' scoped>
	.father-box{
		background: blue;
	}
</style>

<style lang='scss'>
	.father-box .son-box{
		background: red;
	}
</style>
```
在不改变原来的基础上，在需要的地方添加一个不含有scoped属性即可！这样可以解决，但是显的代码过于繁琐，此为中策。

使用样式穿透>>>，/deep/，::v-deep来实现样式的添加
因为scoped属性的原因，每个dom都会被带上data-随机id，所以使用样式穿透来实现深层次的样式添加，如下：

<style lang='scss' scoped>
	.father-box{
		background: blue;
		
		& >>> .son-box{
			/* >>> 在面对scss的时候会导致样式穿透失效 */
			background: red;
		}
		
		/deep/ & .son-box{
			/* /deep/ 就是一个不错的选择，但是有的项目不支持/deep/，所以考虑使用::v-deep */
			background: red;
		}
		
		& ::v-deep .son-box{
			/* 这样使用者这三个写法就可以完成深层次的样式穿透 */
			background: red;
		}
	}
</style>