Vue scoped及deep使用方法解析

众所周知,在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染,scoped使得组件内的样式变成局域样式,只作用于当前组件。

原理如下-------

在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个【data-v-hash】属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素。值得注意的是,当父组件,子组件同时使用scoped属性时,子组件最外层的标签既会被加上当前组件的hash值,又会加上父级组件的hash值,像这样

//子组件最外层标签
<div data-v-b45036b2 data-v-384b136e ></div>

但是有个问题------

在我们用scoped的时候回发现一个问题,就是我们在当前组件内使用的scoped,但是我想在当前组件内改变子组件的样式(非最外层标签),的时候会发现不好使。

<style scoped>
.father-div .child-div{color:red;}
</style>

因为到了浏览器上会解析成

<div data-v-384b136e ></div> 

不好使的原因是应为父组件内样式内解析的是父组件的hash值,而子组件内标签上添加的是子组件的hash值,对应不上当然没效果,那怎么解决呢?

使用deep------

当遇到这种困扰的时候我们可以另写一个style标签,然后不加scoped属性,来盖子组件的样式,当前这么写是可以的,但是不太优雅,这时我们可以用到/deep/属性,

.father-div /deep/ .child-div{color:red;}

当遇到"/deep/"的时候会将"/deep/"的位置替换成组件的hash值,解析成

.father-div[data-v-b45036b2] .child-div{color:red;}

这样只需要注意css的权重就可以覆盖子组件内的样式了,

注意:子组件内最外层的样式由于是带了父子组件的两个hash值,所以是会被两头控制的,不需要/deep/就可以在父组件内覆盖样式

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 浅谈vue中慎用style的scoped属性

    在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件(三方库或者项目定制的组件)的样式的时候,scoped往往会造成更多的困难,需要增加额外的复杂度. scoped实现私有化样式的原理 为什么会说,会增加复杂度?那么我们先从的实现模块的原理说起.为了方便称呼,我们假设把这种组件叫做模块私有组件,其他的未加scoped的叫做模块一般组件. 通过查看DO

  • .vue文件 加scoped 样式不起作用的解决方法

    浅谈关于.vue文件中的style的scoped属性 注意:scoped作用:使得.vue中的样式不影响其他.vue组件样式,而不是scoped使得.vue组件样式不受外样式影响. 1.在vue组件中,为了使样式私有化(模块化),不对全局造成污染,在style标签上添加scoped属性,以表示它只属于当下的模块.但是要慎用,因为在我们需要修改公共组件(第三方库或者项目中定制的组件)的样式的时候,scoped会造成很多困难,组要增加额外的复杂度. 一.创建公共组件button: //button.

  • 详解从vue-loader源码分析CSS Scoped的实现

    虽然写了很长一段时间的Vue了,对于CSS Scoped的原理也大致了解,但一直未曾关注过其实现细节.最近在重新学习webpack,因此查看了vue-loader源码,顺便从vue-loader的源码中整理CSS Scoped的实现. 本文展示了vue-loader中的一些源码片段,为了便于理解,稍作删减.参考 Vue CSS SCOPED实现原理 Vue loader官方文档 相关概念 CSS Scoped的实现原理 在Vue单文件组件中,我们只需要在style标签上加上scoped属性,就可

  • 详解Vue中的scoped及穿透方法

    scoped的由来 css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.为了避免css样式之间的污染,vue中引入了scoped这个概念. 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件.通过设置该属性,使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. 但是这

  • 浅谈关于.vue文件中style的scoped属性

    本文介绍了.vue文件中style的scoped属性以及踩到的坑,具体如下: scoped可以实现style只作用于当前的.vue文件 <template> <div class="user"></div> </template> <script> </script> <style lang='less' scoped> .user { color:#333; } </style> 上面的文

  • Vue中的scoped实现原理及穿透方法

    何为scoped? 在vue文件中的style标签上,有一个特殊的属性:scoped.当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素.通过该属性,可以使得组件之间的样式不互相污染.如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化. scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现,如下是转译前的vue代码: <style scoped> .examp

  • Vue中对比scoped css和css module的区别

    scoped css 官方文档 scoped css可以直接在能跑起来的vue项目中使用. 使用方法: <style scoped> h1 { color: #f00; } </style> 使用scoped划分本地样式的结果编译结果如下: h1[data-v-4c3b6c1c] { color: #f00; } 即在元素中添加了一个唯一属性用来区分. 缺点 一.如果用户在别处定义了相同的类名,也许还是会影响到组件的样式. 二.根据css样式优先级的特性,scoped这种处理会造成

  • 深入浅析Vue中的slots/scoped slots

    一直对Vue中的slot插槽比较感兴趣,下面是自己的一些简单理解,希望可以帮助大家更好的理解slot插槽 下面结合一个例子,简单说明slots的工作原理 dx-li子组件的template如下: <li class="dx-li"> <slot> 你好! </slot> </li> dx-ul父组件的template如下: <ul> <dx-li> hello juejin! </dx-li> <

  • Vue scoped及deep使用方法解析

    众所周知,在组件中给style 标签添加属性 scoped 属性可以避免组件内样式对外界造成污染,scoped使得组件内的样式变成局域样式,只作用于当前组件. 原理如下------- 在编译组件的时候,如果当前组件内style标签上有scoped属性,那么会在当前所有标签上添加一个[data-v-hash]属性,而当前样式表内的所有末尾选择器后面也会加上该属性,那么就使得当前组件内的样式只会作用于当前组件内的元素.值得注意的是,当父组件,子组件同时使用scoped属性时,子组件最外层的标签既会被

  • Vue watch响应数据实现方法解析

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model="cityName"/> new Vue({ el: '#root', data: { cityName: 'shanghai' }, watch: { cityName(newName, oldName) { // ... } } }) 直接写一个监听处理函数,当每次监听到 cityNam

  • Vue router安装及使用方法解析

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ps

  • 解决vue scoped scss 无效的问题

    今天遇到scoped内部的scss设置无效,解决办法如下: /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent

  • vue中使用TypeScript的方法

    引言 近几年前端对 TypeScript的呼声越来越高,Typescript也成为了前端必备的技能.TypeScript 是 JS类型的超集,并支持了泛型.类型.命名空间.枚举等特性,弥补了 JS 在大型应用开发中的不足. 在单独学习 TypeScript时,你会感觉很多概念还是比较好理解的,但是和一些框架结合使用的话坑还是比较多的,例如使用 React.Vue 这些框架的时候与 TypeScript 的结合会成为一大障碍,需要去查看框架提供的.d.ts的声明文件中一些复杂类型的定义.组件的书写

  • VUE中的无限循环代码解析

    代码如下所示: <template> <div id=""> <ul v-for="(item,index) in listaaa"> <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li> </ul> </div> </template> <script> export default { name:

  • vscode vue 文件模板的配置方法

    1. 安装VueHelper插件 2. 寻找 vue.json 按顺序点击vscode的: 文件 首选项 用户代码片段 接着搜索框中输入 vue, 回车 3. 填写模板内容 直接复制一下内容到 vue.json { "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n",

  • Vue内部渲染视图的方法

    1.什么是虚拟DOM 以前M的命令式操作DOM即使用jQuery操作DOM节点,随着状态的增多,DOM的操作就会越来越频繁,程序的状态也越难维护,现在主流的框架都是采用声明式操作DOM,将操作DOM的方法封装起来,我们只要更改数据的状态,框架本身会帮我们操作DOM. 虚拟DOM根据状态建立一颗虚拟节点树,新的虚拟节点树会与旧的虚拟节点树进行对比,只渲染发生改变的部分,如下图: 2.引入虚拟DOM的目的 把渲染过程抽象化,从而使得组件的抽象能力也得到提升,并且可以适配DOM以外的渲染目标: 可以更

  • Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

    1.使用Vue.js实现双向表单数据绑定,例子 <!--html代码--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>财产查勘处理</title> <link r

  • Spring Boot和Vue跨域请求问题原理解析

    这篇文章主要介绍了Spring Boot和Vue跨域请求问题原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 使用Spring Boot + Vue 做前后端分离项目搭建,实现登录时,出现跨域请求 Access to XMLHttpRequest at 'http://localhost/open/login' from origin 'http://localhost:8080' has been blocked by CORS pol

随机推荐

其他