VUE针对组件库生成的标签样式无法修改时，deep的使用场景和用法

一、使用场景

在Vue组件中，我们可以通过添加scoped属性来确保CSS样式仅应用于当前组件，避免全局污染。但是这种情况下会导致组件生成的标签无法修改样式，所以会使用deep来改变深层级的标签样式。

二、deep的用法有几种

1、 ::v-deep
在Vue 2.6.0+和Vue 3中，推荐使用::v-deep：

<style scoped lang="scss">
.parent-selector {
  ::v-deep .nested-class {
    color: red;
  }
}
</style>

2、/deep/ 和 >>>
在旧版本的Vue中，你可能会看到/deep/或>>>操作符，它们的功能与::v-deep相同：

<style scoped lang="scss">
.parent-selector /deep/ .nested-class {
  color: red;
}
</style>

或者

<style scoped lang="scss">
.parent-selector >>> .nested-class {
  color: red;
}
</style>

3、:deep() 用法

<style scoped lang="scss">
.parent-selector {
  	:deep(.nested-class) {
  		color: red;
	}	
}
</style>

三、注意事项

1、过度使用警告：虽然deep非常强大，但过度使用可能会导致样式难以维护。建议仅在必要时使用。
2、你的style没有加 scoped ,就用不到deep，只有scoped状态下才需要deep。