vue组件样式穿透 /deep/ ::v-deep ＞＞＞ 区别

vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过一些方法，穿透scoped。

>>>

如果项目使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改

深度作用选择器>>>可用于項目中的css原生样式，那么可以直接使用 >>>
但如果是sass/less的话可能无法识别，这时候需要使用 /deep/和::v-deep 选择器。
想修改element-ui某个深层元素也有其他方式解决；
解决方法：

将 scoped 移除，
或者新建一个没有 scoped 的 style（一个.vue文件允许多个style）

<style scoped>
   .a {
	 //b是第三方组件类名
  	>>> .b {
		background:orange;
		}
 }
</st
</style>

有些Sass 、Less之类的预处理器无法正确解析 >>>。可以使用/deep/操作符 或者::v-deep( 都是>>> 的别名)

/deep/

<style lang="sass" scoped>
 /*用法1*/
  .a {
 //b是第三方组件类名
    /deep/ .b {
 	  background:orange;
 	 }
  }




	/*用法2*/
	.a /deep/ .b { 
		  background:orange;
	 }
</style>

::v-deep

<style lang="scss" scoped>
 /*用法1*/
  .a {
 	//b是第三方组件类名
  	::v-deep .b {
			background: orange;
		}
  }





 /*用法2*/
 .a ::v-deep .b {
   background: orange;
 }

</style>

vue3.0的环境下，安装项目时选择了dart-sass，这个不支持/deep/和>>>的写法，只能用::v-deep，选择node-sass就不会有这个问题

建议使用第二种方式,·/deep/在某些时候会报错,::v-deep更保险并且编译速度更快.

在这里插入代码片

scoped

当style标签具有该scoped属性时，其CSS将仅应用于当前组件的元素。

作用功能：
实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块虽然方便但是我们需要慎用，因为当我们使用公共组件时会造成很多困难，增加难度，想知道造成那些难度，需要先从scoped实现原理了解