利用v-html给页面添加内容，并同时为内容增加css样式

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

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

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

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

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

1. 去掉<style scoped>中的scoped
   因为通过scoped属性，可以使得组件之间的样式不互相污染，如果增加上去之后就没有办法进行css样式增加了，如下：

   <style lang="scss">
   	.father-box{
   		background: blue;
   		
   		.son-box{
   			background: red;
   		}
   	}
   </style>
   

   但是，这样会导致css样式污染，所以不可取，此为下策。
2. 定义两个<style>标签，一个含有scoped属性，一个不含有scoped属性
   这样可以避免css样式污染，同时也可以为加载的富文本内容增加样式，如下：

   <style lang='scss' scoped>
   	.father-box{
   		background: blue;
   	}
   </style>
   
   <style lang='scss'>
   	.father-box .son-box{
   		background: red;
   	}
   </style>
   

   在不改变原来的基础上，在需要的地方添加一个不含有scoped属性即可！这样可以解决，但是显的代码过于繁琐，此为中策。
3. 使用样式穿透>>>，/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>
   

记录于2023年12月13日16:17:49，记录一下我遇到的bug