vue3 :deep()的使用

文章目录

前言

对应前端小白来说，一看到:deep()这些模式的用法就不理解是啥意思，下面简单介绍一下:deep()是什么以及如何使用。

一、:deep()是什么？

:deep()是可以改变css解析时私有属性的样式

常见使用场景: 如改变输入框的背景颜色

我们找到解析时找到输入框的class

使用:deep()修改背景颜色

<route lang="yaml">meta:title: 测试界面
    </route><script lang="ts" setup>import Draggable from'vuedraggable'const reason =ref('')</script><template><div class="select_text c-red">
    选择器
  </div><div class="outer"><el-input
      v-model="reason"
      type="textarea":autosize="{ minRows: 3, maxRows: 5 }"
      show-word-limit
      maxlength="100"/></div></template><style lang="scss" scoped>:deep(){.el-textarea__inner{background: red;}}</style>

总结

这个实现例子虽然简单，但是对于小白来说，还是要一点时间去理解的，希望能帮助到您！