vue3 :deep

作者：魔影杀戮发布日期:2026-02-22 浏览:33

<template>
  <div class="parent">
    <div class="child">This is a child element</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 示例代码中不涉及脚本部分，仅用于样式穿透的演示
</script>

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

解释说明：

:deep() 是 Vue 3 中用于样式穿透的选择器，它允许你在使用 <style scoped> 的情况下，为子组件中的元素应用样式。
在上面的示例中，.parent 是父组件中的类，而 .child 是子组件中的类。通过使用 :deep(.child)，我们可以确保 .child 元素的样式即使在父组件的 <style scoped> 中定义，也能正确应用到子组件中的元素上。
这里的样式会将 .child 元素的文字颜色设置为红色，并加粗显示。

上一篇：vue 安装axios

下一篇：arco vue