在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中遇到的坑的更多相关文章

  1. <style scoped >中使用深度选择器影响子组件

    摘自:https://blog.csdn.net/zhouzuoluo/article/details/95593143 <style scoped >中使用深度选择器影响子组件 在< ...

  2. vue组件中的style scoped中遇到的问题

    在uve组件中我们我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点.添加scoped之后,实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯 ...

  3. VUE中 style scoped 修改原有样式

    作用域CSS 当<style>标记具有该scoped属性时,其CSS将仅应用于当前组件的元素.这类似于Shadow DOM中的样式封装.它有一些警告,但不需要任何polyfill.通过使用 ...

  4. vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

    在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是 ...

  5. Vue组件篇——Vue3.0中使用高德地图

    VUE-CLI 3.0 中配置高德地图 在项目开发中,地图组件 1.首先,需要注册高德开放平台的账号,并在[应用管理]页面[创建新应用],为应用添加Key值 高德开放平台:https://lbs.am ...

  6. 3.1 vue组件的使用

    1. 组件 组件: 组件是一个局部功能界面,它包含了所有要实现这个功能界面的相关资源,如css.html等. 组件化编程: vue文件包含3个部分 <template> <div&g ...

  7. Vue中的scoped及穿透方法(修改第三方组件局部的样式)

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  8. Vue中的scoped及穿透方法

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组 ...

  9. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

随机推荐

  1. Codeforces Round #284 (Div. 2) A

    解题思路:给出 n个电影的精彩时段(a[i],b[i]),和每次可以跳过的时间x,问要看完所有的精彩时刻,至少需要看多长时间的电影. 因为要时间最少,所有除了精彩时刻的电影则能跳过就跳过(用取余来算) ...

  2. Codeforces Round #493 (Div. 1) B. Roman Digits 打表找规律

    题意: 我们在研究罗马数字.罗马数字只有4个字符,I,V,X,L分别代表1,5,10,100.一个罗马数字的值为该数字包含的字符代表数字的和,而与字符的顺序无关.例如XXXV=35,IXI=12. 现 ...

  3. jq——css类

    1  addClass(classname) 添加类 <script type="text/javascript"> $("input").clic ...

  4. node——简单的服务器启动+乱码问题解决,响应报文头

    这个是一个比较简单的代码 // 1.加载hrrp模块 var http=require('http'); // 2.创建一个http服务对象 var server=http.createServer( ...

  5. ThoughtWorks 技术雷达(2013年5月)

    ThoughtWorks技术雷达(2013年5月) 作者ThoughtWorks技术战略委员会 发布于 六月 25, 2013| 讨论 新浪微博腾讯微博 豆瓣网 Twitter Facebook li ...

  6. Java简述

    Java的特点(11个关键术语)from<Java核心技术I> 1) 简单性 2)  面向对象 3)  分布式 Java有一个丰富的例程库,用于处理像HTTP和FTP之类的TCP/IP协议 ...

  7. [CodeForces] 543B Destroying Roads

    脑洞+暴力. 因为边权是1,所以bfs一下,O(n^2)求任意两点间最短路,再枚举. ans最大是\(dis_{s1,t1}+dis_{s2,t2}\) 再考虑有公共边的情况,一定存在两个点 u, v ...

  8. debian 9 安装后的配置,debian 9 开发环境。

    注意:以下命令用sudo或者以root用户进行 一.Xterm(在安装KDE桌面情况下)的配置(可以黏贴,复制): 首先在根目录下编辑文件.Xresources(没有可以创建) root@debian ...

  9. ucore_lab1

    练习1:理解通过make生成执行文件的过程.(要求在报告中写出对下述问题的回答) 实验过程 静态分析代码. 实验的目录结构如下: . ├── boot ├── kern │   ├── debug │ ...

  10. 【codeforces 452D】Washer, Dryer, Folder

    [题目链接]:http://codeforces.com/problemset/problem/452/D [题意] 洗衣服有3个步骤,洗,干,叠; 有对应的3种洗衣机,分别有n1,n2,n3台,然后 ...