在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,所以是可以设置的。
在vue组件中style scoped中遇到的坑的更多相关文章
- <style scoped >中使用深度选择器影响子组件
摘自:https://blog.csdn.net/zhouzuoluo/article/details/95593143 <style scoped >中使用深度选择器影响子组件 在< ...
- vue组件中的style scoped中遇到的问题
在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯 ...
- VUE中 style scoped 修改原有样式
作用域CSS 当<style>标记具有该scoped属性时,其CSS将仅应用于当前组件的元素.这类似于Shadow DOM中的样式封装.它有一些警告,但不需要任何polyfill.通过使用 ...
- vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式
在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...
- Vue组件篇——Vue3.0中使用高德地图
VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...
- 3.1 vue组件的使用
1. 组件 组件: 组件是一个局部功能界面,它包含了所有要实现这个功能界面的相关资源,如css.html等. 组件化编程: vue文件包含3个部分 <template> <div&g ...
- Vue中的scoped及穿透方法(修改第三方组件局部的样式)
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- Vue中的scoped及穿透方法
何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
随机推荐
- jqury中$("#div").index($this)在setTimeoutt中返回值一直是-1的问题解决方案
今天遇到一个十分蛋疼的问题,花了我一个多小时才解决,其实十分简单,但我是新手,好了,事情是这样的: 我想让鼠标停留在某个元素一定时间再显示它隐藏的内容(不然你鼠标快速滑上滑下,反反复复,如果碰上sli ...
- 如何使用 GNOME Shell 扩展
如何使用 GNOME Shell 扩展 作者: Abhishek Prakash 译者: LCTT MjSeven | 2018-03-15 10:53 评论: 1 简介:这是一份详细指南,我将会 ...
- Pyhton学习——Day60
Form组件 - form表单(验证:保留上次内容) - - Ajax(验证:无需上次内容) - 返回HttpResponse - 前端:跳转或错误信息 1. Form组件扩展: 1.简单扩展 利用F ...
- BZOJ 4864 [BJWC2017]神秘物质 (splay)
题目大意: 让你维护一个序列,支持: 1.合并两个相邻的数为一个新的数 2.在某个位置插入一个数 3.查询一个区间的任意子区间极差的最大值 4.查询一个区间的任意子区间极差的最小值 前两个操作可以用$ ...
- CF508E (贪心+搜索+构造)
题目大意:让你构造一个括号序列,括号匹配的方式类似于栈,给出从左数每个括号 到和它匹配的右括号的 最小和最大距离,让你输出一个合法括号序列 看错题了以为是二分图,然后写了搜索 贪心发现如果距离往小了填 ...
- 半虚拟化驱动virtio-Windows
下载网站 Downloads - KVM http://www.linux-kvm.org/page/Downloads yum 安装: [root@kvm-server ~]# wget https ...
- iText操作pdf(生成,导入图片等)
生成pdf有很多种方法,用pdfbox也很方便,今天我要写的是用iText 主要在pom.xml中配置的jar包如下 <dependency> <groupId>com.low ...
- oracle 用户解锁和修改用户密码
1.安装教程参看:https://jingyan.baidu.com/article/3c48dd34be2a32e10be35881.html 2.用户解锁 --> 运行cmd --> ...
- spring boot启动原理步骤分析
spring boot最重要的三个文件:1.启动类 2.pom.xml 3.application.yml配置文件 一.启动类->main方法 spring boot启动原理步骤分析 1.spr ...
- sql学习笔记(18)-----------数据库创建过程
手动创建数据库的步骤: 第一步:决定数据库实例的SID 数据库实例的SID用来将当前实例和以后可能创建的实例进行区分 % setenv ORACLE_SID mynewdb 第二步:建立数 ...