vue中的::v-deep

在 Vue 中，::v-deep 是一个用于穿透样式封装的选择器，主要用于深层嵌套的组件样式。它常见于使用 <style scoped> 的单文件组件（SFCs）中。

当你使用 scoped 样式时，样式仅适用于组件自身，不会影响到子组件。如果你想要对子组件内的元素应用样式，可以使用 ::v-deep。

使用示例

假设你有一个父组件和一个子组件：

Parent.vue

<template>
  <div class="parent">
    <Child />
  </div>
</template>

<style scoped>
.parent {
  background-color: lightblue;
}

::v-deep .child {
  color: red;
}
</style>

Child.vue

 

<template>
  <div class="child">Hello from Child</div>
</template>

<style scoped>
.child {
  font-size: 20px;
}
</style>

在这个例子中，::v-deep .child 选择器可以穿透父组件的样式，影响子组件的 .child 类，从而使子组件的文本变为红色。

注意事项

• ::v-deep 只适用于样式，不会影响 JavaScript 的作用域。
• 在 Vue 3 中，::v-deep 是唯一推荐的穿透样式的方式，Vue 2 中也有类似的选择器，但语法可能不同。

总结

::v-deep 是一个强大的工具，可以让你在组件封装中灵活地控制样式，确保你的组件既美观又具备良好的样式隔离性。