:deep(){} 样式穿透不生效问题解决方案

在我们写vue的项目的时候,可能会遇到这种情况,父子组件,在父组件中使用了样式穿透给子组件的类添加样式,结果失败了。比如下面这种情况。

父组件

javascript 复制代码
<template>
  <p>我是父组件</p>
  <Son />
</template>

<script setup>
import Son from "./components/son.vue"

</script>

<style scoped>
p{
  color: red;
}
:deep(.title){
  color: blue;
}

</style>

子组件

javascript 复制代码
<template>
  <p>11111</p>
  <p class="title">222222</p>
  <p>3333333</p>
</template>
<script></script>


<style scoped>
</style>

这时候会发现 我们的222应该是样式穿透赋予了蓝色的样式,但是却没有生效,这是为什么呢?

因为我们在使用scoped属性的时候 就相当于给这个vue文件里面的第一个标签加了一个 根 然后 默认使用了一个 子级样式选择器 来处理样式。我们可以检查页面。

我们会发现scoped这个属性其实就是给父组件能够解析的标签上加了一个data-v-...的属性,在这个代码中也就是第一个p标签添加了一个 data-v-...的属性,下面的son标签他没有解析。在这个时候,下面的样式都默认在前面加了一个data-v-。。。的选择器,以至于路过.title的时候,浏览器没有找到 data-v-.....下面的title 以至于我们真正的title盒子没有得到它该有的样式。

那么我们如何解决这个问题呢?

解决

其实当发现问题出现的原因以后,解决办法也随之而来。我们只用在最外层套上一个大盒子,让他得到这个样式就完事了。

javascript 复制代码
<template>
  <div>
    <p>我是父组件</p>
    <Son />
  </div>
</template>

我们也可以单独加在他解析不了的标签上,也就是我们的son标签。

javascript 复制代码
<template>
  <p>我是父组件</p>
  <div>
    <Son />
  </div>
</template>
相关推荐
Jiaberrr1 分钟前
Vite环境下uniapp Vue 3项目添加和使用环境变量的完整指南
前端·javascript·vue.js·uni-app
Marry1.010 分钟前
uniapp背景图用本地图片
前端·uni-app
夏河始溢15 分钟前
一七八、Node.js PM2使用介绍
前端·javascript·node.js·pm2
记忆深处的声音16 分钟前
vue2 + Element-ui 二次封装 Table 组件,打造通用业务表格
前端·vue.js·代码规范
陈随易17 分钟前
兔小巢收费引发的论坛调研Node和Deno有感
前端·后端·程序员
熊的猫31 分钟前
webpack 核心模块 — loader & plugins
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
速盾cdn38 分钟前
速盾:vue的cdn是干嘛的?
服务器·前端·网络
四喜花露水1 小时前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie2 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript