如何修改Vue.js中scoped模式下的子组件内部标签样式 -js教程-PHP中文网

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

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

my-comp.vue

my comp

export default { } 登录后复制 生成后的html如下，可以看到 p 以及所有子标签上都有一个 data-v-0a679ea0 标识属性，这个属性就是我们在 上加上 scoped 的结果，如果你不加 scoped ，是不会生成这个标识属性的。

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

span { color: red; } 登录后复制 这个样式是一个非常通用的样式，如果其他组件中也有 span 标签，那就会应用到这个标签上了，加了 scoped 之后，最终生成的样式是这样的：

span { color: red; } //生成后如下 span[data-v-0a679ea0] { color: red; } 登录后复制 span[data-v-0a679ea0] 这个样式只会应用到自己组件的span上，因为标识属性是组件唯一的。

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

home.vue

import MyCompo from './my-comp' export default { components: {MyCompo} } 登录后复制 生成的html代码如下：

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

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

看下面代码：

这段代码是属于home组件的

.my-comp span { color: blue; } 登录后复制 但这段代码是不会改变 my comp 的颜色的，因为这段样式最终生成的样子是这样的：

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

如何解决这个问题？

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

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

@deep: ~'>>>'; .my-comp @{deep} span { color: blue; } 登录后复制 我们再看最后生成的样式是怎么样的。

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