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 相关文章推荐
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
innerText 使用示例
Jan 23 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
jQuery插件实现多级联动菜单效果
Dec 01 Javascript
js运动应用实例解析
Dec 28 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
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
在“咖啡之国”感受咖啡文化
2021/03/03 咖啡文化
如何获得PHP相关资料
2006/10/09 PHP
第五章 php数组操作
2011/12/30 PHP
深入php socket的讲解与实例分析
2013/06/13 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
webpack之devtool详解
2018/02/10 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
python对象及面向对象技术详解
2016/07/19 Python
深入理解Django的自定义过滤器
2017/10/17 Python
python 日期操作类代码
2018/05/05 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
2014两会优秀的心得体会范文
2014/03/17 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
党委班子纠正“四风”问题整改措施
2014/10/28 职场文书
教师个人年终总结
2015/02/11 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python