在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中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
随机推荐
- 新手配置vux
1.首先跟平常一样创建一个vue的项目 2.开始配置vux 第一步 安装vux npm install vux --save 第二步 安装vux-loader npm install vux-loa ...
- Spinner默认选择问题
1.需求中使用Spinner,不允许有默认选中,在网上查了好多,有设置 spinner.setSelection(-1,true); 也有设置如下: spinner.setOnItemSelected ...
- 互联网智能门锁,手机蓝牙APP成为首选
随着互联网门锁在行业中的普及,大家越加关注到门锁的实施和维护成本.我们在互联网智能门锁的调研中发现,网关联网的智能门锁,使用时需要依赖房间内的宽带上网线路,而断线后客户反馈问题较多.据某家分散式公寓的 ...
- ASP内建对象
Active Server Pages 提供内建对象,这些对象使用户更容易收集通过浏览器请求发送的信息.响应浏览器以及存储用户信息(如用户首选项).本文简要说明每一个对象.有关每个对象的详细信息,请参 ...
- 如何使用pgpool failover_stream.sh自己控制选择指定的master节点
集群架构: h236:master h237:standby sync h238:standby sync h239:stadnby async h240:standby async h241:sta ...
- Java回忆录之英勇黄铜V
说实话最近心好累,就因为一个混合app开发贼简单的一个功能.我本以为很简单,做起来却发现需要很多知识面.麻雀虽小五脏俱全,即使再小的一个功能实现起来也需要很全面的知识来担保.要想盖高楼大厦啊必定要有坚 ...
- 如何在React-Native上使用Typescript
首先安装脚手架: $ yarn global add create-react-native-app 创建项目: create-react-native-app xxx 进入项目并启动: cd xxx ...
- Codeforces 185A Plant( 递推关系 + 矩阵快速幂 )
链接:传送门 题意:输出第 n 年向上小三角形的个数 % 10^9 + 7 思路: 设 Fn 为第 n 年向上小三角形的个数,经过分析可以得到 Fn = 3 * Fn-1 + ( 4^(n-1) - ...
- 通过CSS样式隐藏百度版权标志
在JSP中添加: //隐藏所有.anchorBL{ display:none; } //隐藏下方的保留百度地图图片 .BMap_cpyCtrl{ display:none; } 注:维护他人版权, ...
- 使用plsql创建package
1. 2.需要在packages中新建相同的包名:否则无法编译,报没有声明