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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
js宝典学习笔记(上)
Jan 10 Javascript
div模拟滚动条效果示例代码
Oct 16 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
Ubuntu系统下Angularjs开发环境安装
Sep 01 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
绩效专员岗位职责
2013/12/02 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
初中班主任寄语
2014/04/04 职场文书
财务部岗位职责
2015/02/03 职场文书
创业计划书之寿司
2019/07/19 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android