Vu3中样式穿透不生效处理

本文主要是介绍Vu3中样式穿透不生效处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

代码

App.vue

<template><p>父组件</p><hello-world></hello-world>
</template><script setup>
import HelloWorld from "./components/HelloWorld.vue"</script>
<style scoped>
p{color: red;
}
:deep(.title){color: red;font-size: 20px;
}
</style>

HelloWorld.vue

<template><p>123</p><p class="title">123</p><p>123</p>
</template><script setup></script>

查看F12

由于Vue3支持多个根,父组件中有多个根

处理

- 方法一父组件修改为单根组件

<template><p>父组件</p><hello-world></hello-world>
</template><script setup>
import HelloWorld from "./components/HelloWorld.vue"</script>
<style scoped>
p{color: red;
}
:deep(.title){color: red;font-size: 20px;
}
</style>

• 方法二修改子组件为单根组件

<template><div><p>123</p><p class="title">123</p><p>123</p></div>
</template><script setup></script>

这篇关于Vu3中样式穿透不生效处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---