当前位置:Gxlcms > JavaScript > 如何修改Vue.js中scoped模式下的子组件内部标签样式

如何修改Vue.js中scoped模式下的子组件内部标签样式

时间:2021-07-01 10:21:17 帮助过:7人阅读

本篇文章给大家分享的是如何修改Vue.js中scoped模式下的子组件内部标签样式 ,内容挺不错的,希望可以帮助到有需要的朋友

在Vue.js项目中,我们通常会在<style>标签上加上scoped属性,来为我们的组件生成一个唯一属性,如下面的代码:

my-comp.vue

<template>
  <p class="my-comp">
    <span>my comp</span>
  </p>
</template>

<script>
  export default {
  }
</script>

<style scoped>
</style>

生成后的html如下,可以看到p以及所有子标签上都有一个data-v-0a679ea0标识属性,这个属性就是我们在<style>上加上scoped的结果,如果你不加scoped,是不会生成这个标识属性的。

这个标识属性给我们带来一个好处是,组件内的样式不会影响到其他组件的标签,试想一下,如果我在my-comp组件中写了如下样式:

<style>
  span {
    color: red;
  }
</style>

这个样式是一个非常通用的样式,如果其他组件中也有span标签,那就会应用到这个标签上了,加了scoped之后,最终生成的样式是这样的:

<style scoped>
  span { color: red; }
</style>
//生成后如下
<style>
  span[data-v-0a679ea0] {
    color: red;
  }
</style>

span[data-v-0a679ea0]这个样式只会应用到自己组件的span上,因为标识属性是组件唯一的。

如果我们把组件A放到组件B里面,看看这个标识属性是如何生成的。

home.vue

<template>
  <p class="home">
    <my-compo></my-compo>
  </p>
</template>

<script>
  import MyCompo from './my-comp'
  export default {
    components: {MyCompo}
  }
</script>

<style scoped>
</style>

生成的html代码如下:


data-v-957c7522home组件的标识属性,这个属性也被添加到了my-comp组件的根上,但注意my-compspan标签没有添加data-v-957c7522标识属性,因为这个spanmy-comp组件内部的标签,并没有显示的在home组件中编写。

但有时候会出现需要在home组件写样式来修改my-comp内的标签这样的情况。

看下面代码:

这段代码是属于home组件的

<style scoped>
  .my-comp span {
    color: blue;
  }
</style>

但这段代码是不会改变<span>my comp</span>的颜色的,因为这段样式最终生成的样子是这样的:


my-compspan标签并没有data-v-957c9522这个标识属性。


如何解决这个问题?

我们可以把home组件的scoped去掉就解决了,但这是不推荐的做法,上面已经说了,没有scoped的样式很容易影响其他组件,这种错误是非常难排查的。

如果你使用less这种样式语言,那么有个非常好的解决方案,看下面代码:

<style lang="less" scoped>
  @deep: ~'>>>';
  .my-comp @{deep} span {
    color: blue;
  }
</style>

我们再看最后生成的样式是怎么样的。


标识属性从span移到了.my-comp上了,这样这段样式就很好的应用到了my-comp组件的内部span标签,并且不会影响到其他组件。

以上就是如何修改Vue.js中scoped模式下的子组件内部标签样式 的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行