vue /deep/

作者：涅盘の梦发布日期:2025-11-28 浏览:122

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

<script>
export default {
  name: 'ParentComponent',
  components: {
    ChildComponent: {
      template: '<div class="child">Child Component</div>'
    }
  }
}
</script>

<style scoped>
.parent /deep/ .child {
  color: red;
}
</style>

解释说明

模板部分 (<template>):
- 包含一个父组件 ParentComponent，其中嵌套了一个子组件 ChildComponent。
脚本部分 (<script>):
- 定义了父组件 ParentComponent 和子组件 ChildComponent。
样式部分 (<style scoped>):
- 使用了 /deep/ 深度选择器来穿透作用域样式，使父组件的样式可以影响到子组件。
- 在这个例子中，.parent /deep/ .child 会使 .child 类中的文本颜色变为红色，即使 .child 是在子组件中定义的。

需要注意的是，/deep/ 已经被废弃，推荐使用 ::v-deep 或者 :deep()。

上一篇：vue2 teleport

下一篇：vue3 跳转路由