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

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

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

my-comp.vue

my comp

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

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

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

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

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

home.vue

import MyCompo from './my-comp' export default { components: {MyCompo} } Salin selepas log masuk 生成的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; } Salin selepas log masuk 但这段代码是不会改变 my comp 的颜色的，因为这段样式最终生成的样子是这样的：

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

如何解决这个问题？

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

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

@deep: ~'>>>'; .my-comp @{deep} span { color: blue; } Salin selepas log masuk 我们再看最后生成的样式是怎么样的。

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

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

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