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

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

1. 在不去掉scoped的情况下,在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式。

2. 如果项目用到了预处理器,可以通过vue-loader提供的新写法 vue-loader 写法如下:

<style scoped>
.a >>> .b { /* ... */ }
</style>

某些预处理器(如Sass)可能无法>>>正确解析。在这些情况下,您可以使用/deep/组合器 - 它是别名,>>>并且完全相同。

<style scoped lang="scss">
  .form {
    background-color: #fff;
    /deep/ .list{
      font-size: 18px;
    }
  }
</style>
sass注意要用 /deep/ ,而无法使用 >>> 这个符号

原文地址:https://www.cnblogs.com/wangmaoling/p/9827428.html

时间: 2024-11-06 17:17:49

vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式的相关文章

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

应用场景:在使用vue的大型单页应用页面中,我们可以通过使用scoped属性将当前组件的样式设置局部样式 界面被scoped局部化之后,不能覆盖界面里面的子组件样式,因为样式只对当前界面生效.(可以加/deep/解决) 原文地址:https://www.cnblogs.com/qdlhj/p/10405579.html

sass、less中的scoped属性

1.scoped 的实现原理 Vue.Less 中的 scoped 属性的效果主要是通过 PostCss 实现的.代码示例: //编译前 <template> <div class="example">scoped测试案例</div> </template> <style scoped lang="less"> .example{ color:red; } </style> //编译后 <

父组件中调用子组件的方法和属性

方案:利用ref属性可以获取到dom元素或者是子组件,从而可以调用子组件的方法(注意2.0版本用ref取代了el) 1.当ref直接定义在dom元素上时,则通过this.$refs.name可以获取到dom,对dom进行原生的操作 <div class="foods-wrapper" ref="foods-wrapper"> 通过this.$refs获取到dom进行操作(注意ref属性的命名不能用驼峰,同时获取的时候也不能用) let menuList

Android中自定义组件和它的属性

好长时间没有更新博客了,本来想积累点有深度的东西发,但一直没有找到很好的点.所以,写一些基础的东西,就当积累吧. Android开发中难免会用到自定义的组件,下面以ImageButton为例来介绍怎么自定义组件和它的属性: 第一步.在values/attrs.xml中为组件自定义属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name=&

vue样式加scoped后不能覆盖组件的原有样式解决方法

<style scoped> </style> 为了vue页面样式模块化,不对全局造成污染,建议每个页面的style标签加上scoped,表示他的样式只属于当前的页面,父组件的样式不会泄漏到子组件中.但是scoped也会造成一些额外的负担,如无法覆盖原有组件的样式. 可以加 /deep/  . 深度作用选择器 /deep/  or  >>> 如果希望scoped样式中的选择器“深入”,即影响子组件 例子: /deep/ .el-table .red-row { b

vue组件讲解(is属性的用法)

什么是组件? 在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的. 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可以重复使用的代码.在较高层次上,组件就是自定义元素,Vue.js的编辑器为它添加特殊功能.在有些情况下,组件也可以是原生元素的形式,以is特性进行扩展. 怎么使用组件? 说道这里,组件是什么,我们都有了清楚的了解,但是怎么使用呢? 首先,我们要进行注册,才能进行使用 注册 之前我们也说过,可以通过new来创建一个VUE实例 n

vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> <child v-bind:my-message="parentMsg"></child>//注意传递参数时要用-代替驼峰命名,HTML不区分大小写 </div> 子组件: Vue.component('child', { // camelCase in Ja

vue添加新属性不更新原因

一: 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如下代码: <!DOCTYPE html><html><head><meta charset="utf-8"><title>vue $set</title><script

vue中如何动态添加readonly属性

动态绑定input的readonly属性 1 <inpu :readonly="status ? false : 'readonly'"> status 为 false时添加 readonly 属性,只读,false不要加引号! 原文地址:https://www.cnblogs.com/gopark/p/11172967.html