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

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

注意：scoped作用：使得.vue中的样式不影响其他.vue组件样式，而不是scoped使得.vue组件样式不受外样式影响。

1、在vue组件中，为了使样式私有化（模块化），不对全局造成污染，在style标签上添加scoped属性，以表示它只属于当下的模块。但是要慎用，因为在我们需要修改公共组件（第三方库或者项目中定制的组件）的样式的时候，scoped会造成很多困难，组要增加额外的复杂度。

一、创建公共组件button：

//button.vue
<template>
 <div class="button-warp">
  <button class="button">text</button>
 </div>
</template>
...
<style scoped>
 .button-warp{
  display:inline-block;
 }
 .button{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
 }
</style>

浏览器渲染后的button组件为:

<div data-v-2311c06a class="button-warp">
 <button data-v-2311c06a class="button">text</button>
</div>
.button-warp[data-v-2311c06a]{
 display:inline-block;
}
.button[data-v-2311c06a]{
 padding: 5px 10px;
 font-size: 12px;
 border-radus: 2px;
}

从上面的结果可以看出，添加了scoped属性的组件，做了如下操作：

（1）、给HTML的DOM节点增加一个不重复的data属性。（如：data-v-2311c06a）
（2）、在每句css选择器的末尾（编译后生成的css语句）加一个当前组件的data属性选择器(如：data-v-2311c06a)来私有化样式。

二、在 " 不使用 " scoped的组件中引用button组件：

//content.vue
<template>
 <div class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的公共组件 -->
  <v-button></v-button>
 </div>
</template>
...
<style>
 .content{
  width: 1200px;
  margin: 0 auto;
 }
 .content .button{
  border-raduis: 5px;
 }
</style>

浏览器渲染出来的结果是：

<div class="content">
 <p class="title"></p>
 <!-- v-button假设是上面定义的组件 -->
 <div data-v-2311c06a class="button-warp">
  <button data-v-2311c06a class="button">text</button>
 </div>
</div>
/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
 display:inline-block;
}
.button[data-v-2311c06a]{
 padding: 5px 10px;
 font-size: 12px;
 border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content{
 width: 1200px;
 margin: 0 auto;
}
.content .button{
 border-raduis: 5px;
}

虽然，在content组件中修改了button的border-radius属性，但是由于权重关系，生效的依然是组件内部的样式（即.button[data-v-2311c06a]定义的样式）， 如果此时仍需修改样式，则鼻血加重我们需要修改的样式的权重。

三、在 " 使用 " scoped的组件中引用button组件：

//content.vue
<template>
 <div class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的公共组件 -->
  <v-button></v-button>
 </div>
</template>
...
<style scoped>
 .content{
  width: 1200px;
  margin: 0 auto;
 }
 .content .button{
  border-raduis: 5px;
 }
</style>

浏览器渲染的结果是：

<div data-v-57bc25a0 class="content">
 <p data-v-57bc25a0 class="title"></p>
 <!-- v-button假设是上面定义的组件 -->
 <div data-v-57bc25a0 data-v-2311c06a class="button-warp">
  <button data-v-2311c06a class="button">text</button>
 </div>
</div>
/*button.vue渲染出来的css*/
.button-warp[data-v-2311c06a]{
 display:inline-block;
}
.button[data-v-2311c06a]{
 padding: 5px 10px;
 font-size: 12px;
 border-radus: 2px;
}
/*content.vue渲染出来的css*/
.content[data-v-57bc25a0]{
 width: 1200px;
 margin: 0 auto;
}
.content .button[data-v-57bc25a0]{
 border-raduis: 5px;
}

虽然，我们在content添加了scoped属性，但是.content .button 这句末尾添加的是content的scoped标记，最后我们实际上是找不到向对应的DOM节点的，也就不起作用啦。

解决办法：

在content.vue文件中添加两个style样式：

//content.vue
<template>
 <div class="content">
  <p class="title"></p>
  <!-- v-button假设是上面定义的组件 -->
  <v-button></v-button>
 </div>
</template>
...
<style scoped>
 //针对content组件内部的样式
 .content{
  width: 1200px;
  margin: 0 auto;
 }
</style>
<style>
  //针对公共组件的样式
 .content .button{
  border-raduis: 5px !important;
 }
</style>

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

赞 (0)

相关推荐

  • 深入浅析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文件中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 css和css module的区别

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

  • vue里面父组件修改子组件样式的方法

    在使用 vue 的开发中,我们有时会引用外部组件,包括 UI 组件(ElementUI.iview). 当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素. 但是在父组件中添加 scoped 之后,父组件的样式将不会渗透到子组件中,所以在父组件中书写子组件的样式是无效果的. 一.去掉 scoped 在父组件的 <style> 中去掉 scoped 后,父组件中可以书写子组件的样式,但是你会担心这样会污染全局样式. [因为我们知道正确使用全局样式

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

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

  • vue组件中的样式属性scoped实例详解

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

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

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

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

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

  • vue 路由子组件created和mounted不起作用的解决方法

    判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么) <keep-alive exclude="needExcludeComponentName"> <router-view></router-view> </keep-alive> 使用v-if判断(成功解决) <keep-alive v-if="!$route.meta.noKeepAlive"> <ro

  • Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

    vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-e

  • mybatis 使用jdbc.properties文件设置不起作用的解决方法

    mybatis 使用jdbc.properties文件设置不起作用的解决方法

    这样写的时候起作用: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <typeAliases

  • fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法

    本文实例讲述了fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法.分享给大家供大家参考,具体如下: 当部署含有Fckeditor编辑器的应用程序时,在tomcat下什么问题都没有,但当部署到weblogic下的时候就会碰到样式下拉菜单显示不出来和模板也提示没有模板,有的还会碰见 Error loading "/fckeditor/fckstyles.xml" Do you want to see more info? 这样的提示, 出现这个问题的原因

  • Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原

  • vue使用v-if v-show页面闪烁,div闪现的解决方法

    在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果. 可以在根元素添加v-cloak来解决,并且设置它的样式即可. 代码只是示例,还需要自己修改测试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

  • jsp页面中表达式语言中的$符号不起作用的解决方法

    今天myeclipse里部署了之前做的一个测试项目,发现jsp里的$符号tomcat启动后页面上显示出来了,百度搜了下别人也有类似的问题出现过.经提醒原来是web.xml配置的version设置的是2.5而我tomcat5启动的.是tomcat的版本低于web的版本,从而导致$符号不能正常使用. 后将tomcat5改用tomcat6.jdk采用1.6 启动spring2.5项目.$显示问题解决. 以下是网上摘录的详细说明: 在jsp页面中用表达式语言中的$符号,如${pageScope.titl

  • 在Android开发中替换资源图片不起作用的解决方法

    现象 在android开发中,经常会需要替换res\drawable中的图片,打开res\layout下的文件预览布局页面发现图片已经被替换,但在模拟器或者真实机器上运行时发现该图片并没有被替换,还是使用的是原来的资源图片. 原因 在开发过程中,由于使用模拟器测试了程序,在首次运行后会将res文件夹下的图片资源文件(如drawable-hdpi.drawable-ldpi和drawable-mdpi)拷贝到bin文件夹下.在替换资源图片后,eclipse并不清楚是否有图片改变,所以会使用原来bi

  • Python遍历zip文件输出名称时出现乱码问题的解决方法

    本文实例讲述了Python遍历zip文件输出名称时出现乱码问题的解决方法.分享给大家供大家参考.具体如下: windows中使用python2.7遍历zip文件之后输出文件名等信息,console打印的中文及一些标点出现乱码.查了一下网上说的windows的编码为cp936,print()函数交给系统处理打印,所以要提前编码成windows能够识别的编码. 这种print的乱码也会出现在形如print(mylist)中(mylist是python的list类型变量,print(mylist[2]

随机推荐