scoped 不生效_.vue文件 加scoped 样式不起作用的解决方法
浅谈关于.vue文件中的style的scoped属性
注意:scoped作用:使得.vue中的样式不影响其他.vue组件样式,而不是scoped使得.vue组件样式不受外样式影响。
1、在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块。但是要慎用,因为在我们需要修改公共组件(第三方库或者项目中定制的组件)的样式的时候,scoped会造成很多困难,组要增加额外的复杂度。
一、创建公共组件button:
//button.vue
text
...
.button-warp{
display:inline-block;
}
.button{
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
浏览器渲染后的button组件为:
text
.button-warp[data-v-2311c06a]{
display:inline-block;
}
.button[data-v-2311c06a]{
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
从上面的结果可以看出,添加了scoped属性的组件,做了如下操作:
(1)、给HTML的DOM节点增加一个不重复的data属性。(如:data-v-2311c06a)
(2)、在每句css选择器的末尾(编译后生成的css语句)加一个当前组件的data属性选择器(如:data-v-2311c06a)来私有化样式。
二、在 " 不使用 " scoped的组件中引用button组件:
//content.vue
...
.content{
width: 1200px;
margin: 0 auto;
}
.content .button{
border-raduis: 5px;
}
浏览器渲染出来的结果是:
text
/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
display:inline-block;
}
.button[data-v-2311c06a]{
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content{
width: 1200px;
margin: 0 auto;
}
.content .button{
border-raduis: 5px;
}
虽然,在content组件中修改了button的border-radius属性,但是由于权重关系,生效的依然是组件内部的样式(即.button[data-v-2311c06a]定义的样式), 如果此时仍需修改样式,则鼻血加重我们需要修改的样式的权重。
三、在 " 使用 " scoped的组件中引用button组件:
//content.vue
...
.content{
width: 1200px;
margin: 0 auto;
}
.content .button{
border-raduis: 5px;
}
浏览器渲染的结果是:
text
/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
display:inline-block;
}
.button[data-v-2311c06a]{
padding: 5px 10px;
font-size: 12px;
border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content[data-v-57bc25a0]{
width: 1200px;
margin: 0 auto;
}
.content .button[data-v-57bc25a0]{
border-raduis: 5px;
}
虽然,我们在content添加了scoped属性,但是.content .button 这句末尾添加的是content的scoped标记,最后我们实际上是找不到向对应的DOM节点的,也就不起作用啦。
解决办法:
在content.vue文件中添加两个style样式:
//content.vue
...
//针对content组件内部的样式
.content{
width: 1200px;
margin: 0 auto;
}
//针对公共组件的样式
.content .button{
border-raduis: 5px !important;
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
scoped 不生效_.vue文件 加scoped 样式不起作用的解决方法相关推荐
- .vue文件在webstorm中es6语法报错解决方法
.vue文件在webstorm中es6语法报错解决方法 参考文章: (1).vue文件在webstorm中es6语法报错解决方法 (2)https://www.cnblogs.com/yuqing6/ ...
- Unity网页插件Embedded Browser(ZFBrowser)打包文件无法加载本地网页或网站网址解决方法
Unity网页插件Embedded Browser(ZFBrowser)打包文件无法加载本地网页或网站网址解决方法 问题:最近使用ZFBrowser开发VR嵌入网页发现出现一个问题,在编辑器模式下场景 ...
- vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
- Linux下C/C++程序编译链接加载过程中的常见问题及解决方法
Linux下C/C++程序编译链接加载过程中的常见问题及解决方法 1 头文件包含的问题 报错信息 该错误通常发生在编译时,常见报错信息如下: run.cpp:2:10: fatal error: dl ...
- hosts文件为空,仍然显示ERR_CONNECTION_RESET的解决方法(hosts.ics)
hosts文件为空,仍然显示ERR_CONNECTION_RESET的解决方法(hosts.ics) 最近在学习 Java 的时候,未免要使用到 idea 这一神器,但是不知道为什么,登录 idea ...
- c2010页面闪现_Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Vue.js中 v-if 和v-else-if页面加载出现闪现的问题及解决方法 发布于 2020-2-22| 复制链接 vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然 ...
- vue子组件mounted不执行_vue 路由子组件created和mounted不起作用的解决方法
vue 路由子组件created和mounted不起作用的解决方法 判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么) 使用v-if判断(成功解决) 可以 ...
- vue项目中npm install安装失败,万能解决方法
vue项目中npm install安装失败,万能解决方法,即更换淘宝镜像,再执行npm install. 具体如下: npm config set registry https://registry. ...
- PS安装扩展面板提示无法加载,因为它未经正确签署解决方法(适用于Mac/Win)
最近发现好多小伙伴在使用Photoshop Mac端或者win端安装ps扩展面板时,总会遇到Photoshop错误提示无法加载,因为它未经正确签署.今天小编就和大家分享解决Mac/Win端ps扩展面板 ...
最新文章
- windows开启ssh当跳板机
- 预测技术智能化,机器学习是第一功臣
- insertAfter
- 怎样通过WireShark抓到的包分析出SIP流程图
- freeRtos学习笔记 (8) 任务通知
- 基于区块链的健康链系统设计与实现(3)系统设计
- 不同电脑 命名管道_电脑键盘上的F1到F12,这些键都有哪些用处?用了5年总算明白了...
- 生成icon图标 1005 html 左上角icon图标
- 纽约大学计算机工程专业课程,纽约大学计算机工程硕士专业介绍及课程要求
- Java限流之 —— Nginx限流
- MacBook2016在SSD上安装Win To Go(成功经验分享)
- 【react】---函数化编程的理解,柯里化函数及返柯里化函数的理解...
- 鸡蛋掉落----经典dp(动态规划)
- dialog 程序 表控制
- Pearson相关系数公式的四种形式及Python代码实现
- JavaScript_原型链继承
- 充电系列-1-msm8909充电驱动常见修改
- 解决WPS或Word中“图片隐藏在文字下面”的问题
- 工程师职称条件及任职要求
- mysql 大批量数据查询_mysql 处理 多条件 大批量数据 查询