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>

---

总结

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