在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中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
随机推荐
- 用过的jQuery记录
var list= $('input:radio[name="name"]:checked').val(); //选择input中单选name为“name”的并且是选中状态的 in ...
- Hibernate配置文件 hibernate.cfg.xml
<!--标准的XML文件的起始行,version='1.0'表明XML的版本,encoding='gb2312'表明XML文件的编码方式--> <?xml version='1.0' ...
- GCC中的弱符号与强符号
GCC中的弱符号与强符号 我们经常在编程中碰到一种情况叫符号重复定义.多个目标文件中含有相同名字全局符号的定义,那么这些目标文件链接的时候将会出现符号重复定义的错误.比如我们在目标文件A和目标文件B都 ...
- C编译时`true' undeclared (first use in this function)
在编译C语言时有时会遇到这样的错误提示: 'true' undeclared (first use in this function) or `false' undeclared (first use ...
- CF343E Pumping Stations(最小割树)
没学过最小割树的出门左转. 我们已经知道了两点的最小割就是最小割树上,对应两点之间路径的权值的最小值. 找到最小割树中权值的最小的边. 那么一定是先选完一侧的点在选完另一侧的点. 因为当前边最小,那么 ...
- AT1145 ホリドッグ
洛谷的题解区里竟然没有O(1)做法详解-- 题面就是要判断\(1+2+\dots+n\)是不是素数 很容易让人想到上面的式子事实上等于\(n(n+1)/2\) 根据质数的定义,质数只能被1和自身整除 ...
- linux 文件的权限说明
1.开头 d:表示问文件夹 ( directory ) -:表示普通二进制文件 ( 压缩包.文件 等等 ) l:表示软连接文件 ( link 硬链接或软链接 ) 2.权限 ( 3 个为一组 ) r:读 ...
- Ubuntu(Linux Mint):sudo apt-get upgrade升级失败
Ubuntu上进行sudo apt-get upgrade后出现异常,升级失败. 异常信息如下: E: dpkg was interrupted, you must manually run 'dpk ...
- 洛谷 P1461 海明码 Hamming Codes
P1461 海明码 Hamming Codes 题目描述 给出 N,B 和 D,要求找出 N 个由0或1组成的编码(1 <= N <= 64),每个编码有 B 位(1 <= B &l ...
- maven也是Apache开发的,也是java开发的。maven需要你本地系统JDK的支持
1. 3. 添加 M2_HOME 和 MAVEN_HOME 添加 M2_HOME 和 MAVEN_HOME 环境变量到 Windows 环境变量,并将其指向你的 Maven 文件夹. M2_HOME ...