scoped是一个vue的指令，用来控制组件的样式生效区域，加上scoped,样式只在当前组件内生效，不加scoped，这个节点下的样式会全局生效。

需要注意的是：一个组件的样式肯定是用来美化自己组件结构的，不应该影响到其他的组件。

建议：只要定义的是单文件组件，一定要给style标签加上scoped指令，从而防止组件之间的样式冲突。

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。

现象：点发货管理菜单时，左侧菜单栏样式就会发生变化：点击发货管理后，所有二级菜单紧靠左边显示。

原因分析：如果不加scoped属性，则子组件会影响父组件的样式，而父组件样式变化后挤占了左侧菜单的空间，导致所有菜单左移。

加上了scoped属性之后：点击发货管理后，四个字居中显示

vue子组件的样式没有加scoped属性会影响父组件的样式的更多相关文章

  1. vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  2. 在vue中scss通过scoped属性设置局部变量如何设置框架样式

    应用场景:在使用vue的大型单页应用页面中,我们可以通过使用scoped属性将当前组件的样式设置局部样式 界面被scoped局部化之后,不能覆盖界面里面的子组件样式,因为样式只对当前界面生效.(可以加 ...

  3. 13-前端不通路径同一个请求访问同一个页面时，有时样式没有加载出来（jss,image,css）

    通过如下方式访问同一个网站时,下面一个可以加载样式,而下面一个加载的页面却没有样式,思考良久没有想通,当时也忘记了用浏览器看下 css,js,image的请求路径,其实在前端页面里面我直接:  这样引 ...

  4. vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  5. sass、less中的scoped属性

    1.scoped 的实现原理 Vue中的Less 中的 scoped 属性的效果主要是通过 PostCss 实现的.代码示例: //编译前 <template> <div class ...

  6. vue scoped 穿透_vue 修改内部组件样式问题

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

  7. VUE 父组件与子组件交互

    1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...

  8. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  9. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

随机推荐

  1. python--可迭代对象、迭代器和生成器

    迭代器 1.什么是迭代器? 不依赖于索引的取值方式 迭代是一个重复的过程,即每一次重复为一次迭代,并且每次迭代的结果都是下一次迭代的初始值 示例: str1 = 'abcde' count = 0 w ...

  2. 12.su 命令与sudo 服务

     1.su 命令:解决切换用户身份的需求,使得当前用户在不退出登录的情况下,顺畅地切换到其他用户. 比如从root 管理员切换至普通用户: [root@Centos test]# id uid=0(r ...

  3. 使用 with as 优化SQL

    当我们书写一些结构相对复杂的SQL语句时,可能某个子查询在多个层级多个地方存在重复使用的情况,这个时候我们可以使用 with as 语句将其独立出来,极大提高SQL可读性,简化SQL~ with as ...

  4. CF1466-D. 13th Labour of Heracles

    CF1466-D. 13th Labour of Heracles 题意: 给出一个由\(n\)个点构成的树,每个点都有一个权值.现在你可以用\(k,k\subset\)\([1, n]\)个颜色来给 ...

  5. 通过k8s部署dubbo微服务并接入ELK架构

    需要这样一套日志收集.分析的系统: 收集 -- 能够采集多种来源的日志数据 (流式日志收集器) 传输 -- 能够稳定的把日志数据传输到中央系统 (消息队列) 存储 -- 可以将日志以结构化数据的形式存 ...

  6. Jenkins管理员密码忘记修改操作

    一.Jenkins管理员密码忘记 当jenkins忘记了管理用户的密码时,只能通过修改配置文件并重启的方式初始化设置用户名及密码,操作如下: [root@localhost jenkins]# vim ...

  7. 电影推荐系统---协同过滤算法(SVD,NMF)

    SVD 参考 https://www.zybuluo.com/rianusr/note/1195225 1 推荐系统概述   1.1 项目安排     1.2 三大协同过滤   1.3 项目开发工具 ...

  8. codeforces 8C（非原创）

    C. Looking for Order time limit per test 4 seconds memory limit per test 512 megabytes input standar ...

  9. Leetcode（144）-二叉树的前序遍历

    给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 进阶: 递归算法很简单,你可以通过迭代算法完成吗? 二叉树的前序遍历有递归 ...

  10. 手工数据结构系列-C语言模拟队列 hdu1276

    #include <stdio.h> #include <stdlib.h> #define init_size 1000 typedef struct { int head, ...