vue组件style中scoped的作用及说明
更新时间：2024年09月03日 09:28:59 作者：Ocean__Lv
这篇文章主要介绍了vue组件style中scoped的作用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
style中scoped的作用
scoped的作用：
使当前组件的样式不会和其它组件冲突，因为它会给每个组件相关的选择器添加不会重复的属性
//没有添加scoped
h1 {
}
//添加scoped
h1[data-e543434] {
}注意事项：
- 1、使用 scoped 后，父组件的样式将不会渗透到子组件中。
- 2、不过一个子组件的*** 根节点 **会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。
- 3、这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式
<style scoped> </style>
如果希望父组件的样式渗透到子组件，可以使用*** 样式穿透 **
scss的样式穿透的写法： 加上::v-deep（如果不兼容，就加/deep/ ）
//方案一
.wrapper ::v-deep .swiper-pagination-bullet {
opacity 1
background-color #fff
}
//方案二
.swiper-container /deep/ .swiper-pagination-bullet {
background-color: #f00;
opacity: 1;
}vue中style加上scoped属性后部分样式失效
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素；使用 scoped 后，父组件的样式将不会渗透到子组件中。
不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。
1.混用本地和全局样式
<style> /* 全局样式 */ </style> <style scoped> /* 本地样式 */ </style>
2.深度作用选择器（样式穿透）
- vue2： >>> 或者 /deep/
- vue3： &:deep(calssName)
具体可看vue官方文档的vue-loader
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue实现验证码倒计时按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
更好的了解项目的目录结构,能更好的去开发项目,下面这篇文章主要给大家介绍了关于vue3项目目录结构的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
vue-router中scrollBehavior的巧妙用法
本文给大家介绍vue-router中scrollBehavior的妙用,文中给大家提到了两种解决方案，需要的朋友可以参考下2018-07-07
Vue 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。下面这篇文章主要给大家深入讲解了关于Vue的响应式原理，以及Vue响应式的一些注意事项，需要的朋友下面随着小编来一起学习学习吧。2017-12-12
使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，下面这篇文章通过源码主要分析了Vue的双向数据绑定，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。2017-09-09
Vue3 TypeScript 实现useRequest详情
本文介绍了Vue3 TypeScript实现useRequest详情，useRequest可能是目前社区中最强大，最接地气的请求类 Hooks了。可以覆盖99%的网络请求场景，无论是读还是写，无论是普通请求还是分页请求，无论是缓存还是防抖节流，通通都能支持，关于其介绍需要的小伙伴可以参考一下2022-05-05
这篇文章主要为大家详细介绍了vue实现带复选框的树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
文章介绍了如何使用axios的cancelToken功能取消请求,包括两种创建cancelToken的方法：使用CancelToken.source工厂方法和通过传递executor函数创建,还提到了如何处理取消请求的原因,并给出了解决频繁点击发送请求问题的建议2025-12-12
一文搞懂Vue3中的异步组件defineAsyncComponentAPI的用法
这篇文章主要介绍了一文搞懂Vue3中的异步组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
本文将介绍几种基于Vue、Element-UI的换肤实现方案，力争通俗易懂，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论