vue里面父组件修改子组件样式的方法


Posted in Javascript onFebruary 03, 2018

在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI、iview)。

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。

但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的。

一、去掉 scoped

在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式。

【因为我们知道正确使用全局样式的姿势是使用一个全局的 app.css】

二、混用本地和全局样式

你可以在一个组件中同时使用有作用域和无作用域的样式:

<style>
/* 全局样式 */
</style>
<style scoped>
/* 本地样式 */
</style>

我们把 需要修改子组件的样式 写在上面那个全局样式里面

三、使用深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>> 操作符:

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

有些像 SASS 之类的预处理器无法正确解析 >>>。这种情况下你可以用 /deep/ 操作符取而代之 —— 这是一个 >>> 的别名,同样可以正常工作。

OK,主要内容就是以上几点。

需要额外补充的是:

1、通过 v-html 创建的 DOM 内容不受作用域内的样式影响,但是你仍然可以通过深度作用选择器来为他们设置样式

2、CSS 作用域不能代替 class

3、在递归组件中小心使用后代选择器

以上这篇vue里面父组件修改子组件样式的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
vue中使用props传值的方法
May 08 Javascript
layer.open 获取不到表单信息的解决方法
Sep 26 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 #Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 #Javascript
Vue修改mint-ui默认样式的方法
Feb 03 #Javascript
vue+webpack实现异步组件加载的方法
Feb 03 #Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 #Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 #Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 #Javascript
You might like
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
django中的ajax组件教程详解
2018/10/18 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
JS焦点图切换,上下翻转
2011/05/12 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python使用getpass库读取密码的示例
2017/10/10 Python
Python内建模块struct实例详解
2018/02/02 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
python sqlite的Row对象操作示例
2019/09/11 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
使用HTML5技术开发一个属于自己的超酷颜色选择器
2013/09/22 HTML / CSS
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
安全目标管理责任书
2014/07/25 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
简爱读书笔记
2015/06/26 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
Python实现照片卡通化
2021/12/06 Python
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL