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 相关文章推荐
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
javascript解析json实例详解
Nov 05 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
详解Layer弹出层样式
Aug 21 Javascript
webpack之devtool详解
Feb 10 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
通过GASP让vue实现动态效果实例代码详解
Nov 24 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
php Xdebug的安装与使用详解
2013/06/20 PHP
初识PHP
2014/09/28 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python继承和抽象类的实现方法
2015/01/14 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python退火算法在高次方程的应用
2018/07/26 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
Java基础面试题
2014/07/19 面试题
汽修专业学生自我鉴定
2013/11/16 职场文书
审计工作个人的自我评价
2013/12/25 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
商务英语求职信范文
2015/03/19 职场文书
民事上诉状范文
2015/05/22 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP