大白话理解scoped
在style标签设置scoped属性,可以使组件之间的样式不互相污染,达到样式私有模块化的目的。
接下来,我们分别从原理、优缺点、解法来认识下
原理:
style标签设置scoped属性,经过PostCSS转译后,在DOM结构以及css样式上加唯一的标记:data-v-hash属性,意味着CSS样式就只能作用于当前组件,从而使得组件之间的样式不互相污染,达到样式私有模块化的目的。
1)当前组件的DOM根节点及其子节点加一个不重复data属性(如data-v-19fca230),
2)当前组件引入子组件,那么,给子组件的根节点加上当前组件的data属性
3)在每句css选择器的末尾加一个当前组件的data属性选择器(如data-v-19fca230)
举个例子
例一:
<style scoped>
.wrap{
backgorund: lightsalmon
.parent1{
color: red
}
}
.parent2{
color: green
}
</style>
转译后, 当前组件的Dom根节点及子节点都有了一个[data-v-5406a40e]属性,其选择器末尾加一个当前组件的[data-v-5406a40e]属性
例二:引入子组件
// 父组件
<template> <div class="wrap"> <h1 class="parent">当前组件1</h1> <childCompontent class="childCompontent"></childCompontent> </div> </template> <style scoped> .childCompontent{ backgorund: lightgreen } </style>
// 子组件 <template> <div>
<h1 class="child-wrap">子组件</h1>
</div>
</template>
<style scoped>
</style>
转译后,
当前组件引入子组件,在子组件的style标签加了scoped, 那么,仅子组件的Dom根节点会带有父组件相同的[data-v-5406a40e]属性。
带有childCompontent的标签,其选择器末尾加一个当前父组件的[data-v-5406a40e]属性,而引入的child-wrap的标签,其选择器末尾加一个当前组件,也就是子组件组件的[data-v-180cce0f]属性
要是想在当前父组件中修改子组件的样式,怎么办呢?
直接修改,如下
// 父组件
<template> <div class="wrap"> <childCompontent class="childCompontent"></childCompontent> </div> </template> <style scoped>
.wrap .child-wrap{
color: red
}
</style>
结果,没有生效。那是因为渲染后,css选择器样式如下:
// 父组件渲染后
.wrap .child-wrap[data-v-5406a40e] { color: red; }
// 子组件渲染后
.child-wrap[data-v-180cce0f] {
color: lightpink;
}
目标子组件css选择器是.child-wrap[data-v-180cce0f] ,而我们在父组件修改的是data-v-5406a40属性的child-wrap,根本作用不到我们想要的DOM
节点上,
这种情况我们在父组件内部写的任何样式都不会影响到子组件组件,所以这就尴尬了。。。。
解决方法:
1)在模板中使用两次style标签:一个用于私有样式(带scoped属性),一个用于共有样式
<style lang="scss"> /* 需要覆盖的样式--注意css权重 */
.wrap .childCompontent .child-wrap{
</style> <style lang="scss" scoped> /* 当前组件的私有样式 */ </style>
2)使用 >>> 或者 /deep/ 操作符 (Sass、Less等预处理器无法正确解析 >>>,可以使用/deep/ )
<style lang="scss" scoped> .wrap /deep/ .child-wrap { color: red } } </style>
原文地址:https://www.cnblogs.com/renzm0318/p/11877361.html
- MySQL(二)之服务管理与配置文件修改和连接MySQL
- linux安装mysql
- 黑客真的会毁了比特币吗?
- Java实现Http的Post、Get、代理访问请求
- MySQL(一)之MySQL简介与安装
- 无人值守,检测程序正常运行,遇故障则重启服务
- JS魔法堂:jsDeferred源码剖析
- JavaSE(八)之集合概述
- 浅谈PHP开发与Java开发的优劣势,还不知道学习方向的可以来看看
- KVM+Qemu+Libvirt实战
- 内核级虚拟化技术
- tomcat配置ROOT目录和多站点
- IntelliJ IDEA使用(一)基本设置与类、方法模板设置
- JS魔法堂:从void 0 === undefined说起
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法