vue :deep

作者：资本principal 发布日期:2025-06-18 浏览:19

<template>
  <div class="parent">
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
};
</script>

<style scoped>
.parent :deep(.child-class) {
  color: red;
}
</style>

解释说明：

:deep() 是 Vue 3 中用于在 scoped 样式中选择子组件元素的选择器。
在上面的代码中，.parent 是父组件中的一个类，而 .child-class 是子组件中的一个类。
使用 :deep(.child-class) 可以让父组件中的样式穿透到子组件中的元素，从而将 .child-class 的文本颜色设置为红色。

上一篇：vue 绑定class

下一篇：vue双向数据绑定