.vue文件 加scoped 样式不起作用

2019-12-11 16:21:00

参考地址 .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>


  • 2017-02-16 15:14:14

    动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法。

  • 2017-02-17 17:11:24

    mysql插入数据后返回自增ID的方法c

    产生的ID 每次连接后保存在服务器中。这意味着函数向一个给定客户端返回的值是该客户端产生对影响AUTO_INCREMENT列的最新语句第一个 AUTO_INCREMENT值的。这个值不能被其它客户端影响,即使它们产生它们自己的 AUTO_INCREMENT值。这个行为保证了你能够找回自己的 ID 而不用担心其它客户端的活动,而且不需要加锁或处理

  • 2017-02-21 07:59:45

    不会被 iOS 停掉的网页定时器

    其实这个标题略微有点标题党:iOS 中,除了少数服务(如播放音乐),大部分 App 在用户按了 Home 键之后,过不了多久就会被完全冻结,这对 Safari 同样适用。本文不考虑这样情况,只考虑 Safari 运行时,怎样让定时器持续工作。

  • 2017-02-24 15:04:10

    PHP 中的 9 个魔术方法

    这个标题有点牵强因为php有不只9种魔术方法, 但是这些将会引导你使用php魔术方法一个好的开始。它可能魔幻,但是并不需要魔杖。 这些'魔术'方法拥有者特殊的名字,以两个下划线开始,表示这些方法在php特定事件下将会被触发。这可能听起来有点自动魔法但是它真的很酷的,我们已经看过一个简单的例子在 last post,即我们使用一个构造器-使用这个作为我们第一个例子

  • 2017-02-24 15:06:18

    PHP 中的 9 个魔术方法

    这个标题有点牵强因为php有不只9种魔术方法, 但是这些将会引导你使用php魔术方法一个好的开始。它可能魔幻,但是并不需要魔杖。 这些'魔术'方法拥有者特殊的名字,以两个下划线开始,表示这些方法在php特定事件下将会被触发。这可能听起来有点自动魔法但是它真的很酷的,我们已经看过一个简单的例子在 last post,即我们使用一个构造器-使用这个作为我们第一个例子

  • 2017-02-24 15:07:05

    PHP 中的 9 个魔术方法

    这个标题有点牵强因为php有不只9种魔术方法, 但是这些将会引导你使用php魔术方法一个好的开始。它可能魔幻,但是并不需要魔杖。 这些'魔术'方法拥有者特殊的名字,以两个下划线开始,表示这些方法在php特定事件下将会被触发。这可能听起来有点自动魔法但是它真的很酷的,我们已经看过一个简单的例子在 last post,即我们使用一个构造器-使用这个作为我们第一个例子

  • 2017-02-24 15:53:02

    PHP中__get()和__set()的用法实例详解

    在PHP5中,预定义了两个函数“__get()”和“__set()”来获取和赋值其属性,对每个字段进行set和get的操作。只需要加上两个魔术方法即可