vue2中是使用 /deep/ 样式穿透，在 vue3中不支持了， vu3中使用 :deep()取代了 /deep/
如果给当前组件的style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，则需要使用 :deep()。
如果App.vue中没有这个根节点，那么 :deep()不起作用，我把根节点加上，:deep()样式就生效了。
1.父组件App.vue中代码
:deep(.title3)</span><span class="token punctuation">{</span>
<span class="token property">background-color</span><span class="token punctuation">:</span>antiquewhite<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
2.子组件中的代码
<template>
<h3 class="title3">受父组件影响的内容h3>
template>
#swiper >.swiperContext :deep(p) {
width: 100vw;
height:60vw;
background: #000;
border:5px solid;
box-sizing: border-box;
color: #fff;
border-radius: 5%;
}
Original: https://blog.csdn.net/weixin_43953518/article/details/128897276
Author: 前端打工人
Title: vue3中 /deep/ 的使用，vue3不支持/deep/样式
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/818154/
转载文章受原作者版权保护。转载请注明原作者出处！