浅谈关于.vue文件中style的scoped属性


Posted in Javascript onAugust 19, 2017

本文介绍了.vue文件中style的scoped属性以及踩到的坑,具体如下:

scoped可以实现style只作用于当前的.vue文件

<template>
  <div class="user"></div>
</template>
<script>

</script>

<style lang='less' scoped>
.user {
  color:#333;
}
</style>

上面的文件渲染出的dom结构会是这样的

<div data-v-53795c54 class="user"></div>

css样式是这样的

.user[data-v-53795c54] {
  color:#333;
}

这样就现实了样式只作用于当前.vue文件。

问题:添加scoped属性后样式不起作用

原因是,css被构建成.user[data-v-53795c54] 但是doc节点依然是普通的<div class="user"></div>,导致样式不能作用在dom上而失效。

原因在引用的组件上,解决的方法是将scoped属性关闭。

scoped关闭时的使用建议

如果需要将scoped关闭,那么style就是作用于整个单页应用

可是我们仍然想要样式之作用于当前的.vue文件,减少对其他文件样式的影响

1、给template下的根节点加一个class,并基于这个class添加样式

<template>
<div class="user">
<p class="name">zaunk</p>
</div>
</template>
<script>

</script>

<style lang='less>
.user {
color:#333;
.name {
color:#122222;
}
}
</style>

2、基于第一条建议,不要有定义两个相同class名称的根节点,因为都作用于整个单页会有一个失效。

3、不要使用 span {}这种做样式设置。因为

<template>
<div class="user">
<el-button class="name">zaunk</el-button>
</div>
</template>
<style lang='less>
.user {
color:#333;
span {
color:#122222;
}
}
</style>

上面的样式同样会作用于组件el-button,这是很危险的

在vue组件中style scoped中遇到的坑

浅谈关于.vue文件中style的scoped属性

在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识,当然也会给当前style的所有样式添加[data-v-1233]这样的话,就可以使得当前样式只作用于当前组件的节点。但是我们需要注意的是如果我们添加了子组件,同样的,如果子组件也用scoped标识了,那么在父组件中是不能设置子组件中的节点的。若父组件有scoped,子组件没有设置,同样,也是不能在父组件中设置子组件的节点的样式的,因为父组件用了scoped,那么父组件中style设置的样式都是唯一的了,不会作用与其他的组件样式,我在用vue-quill-editor富文本编辑器的时候就遇到了这个坑,我只是想让内容区设置一个高度,这样的话,是必须在App.vue中设置的,我们App.vue相当于根容器,没有设置scoped,所以是可以设置的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
深入浅析react native es6语法
Dec 09 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 #Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 #Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 #Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 #Javascript
深入理解ES6的迭代器与生成器
Aug 19 #Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 #jQuery
Vue自定义事件(详解)
Aug 19 #Javascript
You might like
西德产收音机
2021/03/01 无线电
PHP文件上传实例详解!!!
2007/01/02 PHP
PHP实现货币换算的方法
2014/11/29 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
python分割列表(list)的方法示例
2017/05/07 Python
Python 含参构造函数实例详解
2017/05/25 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
python浪漫表白源码
2019/04/05 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
股权转让协议书范本
2014/04/12 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
2015年话务员工作总结
2015/04/29 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
Python的这些库,你知道多少?
2021/06/09 Python