学习Vue3 第三十二章(详解Scoped和样式 穿透) |
您所在的位置:网站首页 › vue组件穿透到body › 学习Vue3 第三十二章(详解Scoped和样式 穿透) |
主要是用于修改很多vue常用的组件库(element, vant, AntDesigin),虽然配好了样式但是还是需要更改其他的样式 就需要用到样式穿透 scoped的原理 vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式,以保证唯一(而这个工作是由过PostCSS转译实现的),达到样式私有化模块化的目的。 总结一下scoped三条渲染规则: 给HTML的DOM节点加一个不重复data属性(形如:data-v-123)来表示他的唯一性在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-123])来私有化样式如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的data属性PostCSS会给一个组件中的所有dom添加了一个独一无二的动态属性data-v-xxxx,然后,给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom,这种做法使得样式只作用于含有该属性的dom——组件内部dom, 从而达到了'样式模块化'的效果. 案例修改Element ui Input样式 发现没有生效
如果不写Scoped 就没问题 原因就是Scoped 搞的鬼 他在进行PostCss转化的时候把元素选择器默认放在了最后 Vue 提供了样式穿透:deep() 他的作用就是用来改变 属性选择器的位置
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |