在Vue.js中,在scoped模式下如何修改子组件内部标签的样式
2018-04-02 15:23
891 查看
在Vue.js项目中,我们通常会在<style>标签上加上scoped属性,来为我们的组件生成一个唯一属性,如下面的代码:
my-comp.vue<template>
<div class="my-comp">
<span>my comp</span>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>生成后的html如下,可以看到div以及所有子标签上都有一个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>
<div class="home">
<my-compo></my-compo>
</div>
</template>
<script>
import MyCompo from './my-comp'
export default {
components: {MyCompo}
}
</script>
<style scoped>
</style>生成的html代码如下:
data-v-957c7522是home组件的标识属性,这个属性也被添加到了my-comp组件的根上,但注意my-comp的span标签没有添加data-v-957c7522标识属性,因为这个span是my-comp组件内部的标签,并没有显示的在home组件中编写。
但有时候会出现需要在home组件写样式来修改my-comp内的标签这样的情况。
看下面代码:
这段代码是属于home组件的<style scoped>
.my-comp span {
color: blue;
}
</style>但这段代码是不会改变<span>my comp</span>的颜色的,因为这段样式最终生成的样子是这样的:
my-comp的span标签并没有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标签,并且不会影响到其他组件。
my-comp.vue<template>
<div class="my-comp">
<span>my comp</span>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>生成后的html如下,可以看到div以及所有子标签上都有一个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>
<div class="home">
<my-compo></my-compo>
</div>
</template>
<script>
import MyCompo from './my-comp'
export default {
components: {MyCompo}
}
</script>
<style scoped>
</style>生成的html代码如下:
data-v-957c7522是home组件的标识属性,这个属性也被添加到了my-comp组件的根上,但注意my-comp的span标签没有添加data-v-957c7522标识属性,因为这个span是my-comp组件内部的标签,并没有显示的在home组件中编写。
但有时候会出现需要在home组件写样式来修改my-comp内的标签这样的情况。
看下面代码:
这段代码是属于home组件的<style scoped>
.my-comp span {
color: blue;
}
</style>但这段代码是不会改变<span>my comp</span>的颜色的,因为这段样式最终生成的样子是这样的:
my-comp的span标签并没有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模式下如何修改子组件内部标签的样式
- vue组件中的样式属性:scoped,解决在父组件中无法修改子组件样式问题
- vue里面父组件如何修改子组件样式
- vue开发中,父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。
- vue中element组件样式修改无效的解决方法
- vue.js,table标签(表格)使用过度transition组件出错
- Vue.js学习系列(八)---如何使用组件
- vue中修改子组件样式
- vue.js vue组件中style样式中的css引入背景图路径不对,解决方案
- vue.js如何在标签属性中插入变量参数
- js如何通过tagname取到标签并改变所有该类标签的样式
- vue组件中的样式属性--scoped
- vue组件内部绑定class还有style样式
- 在项目开发中,jsp页面不会少了,如何公用页面(添加页面和修改页面)和公用样式代码(css,js)?
- vue中如何让子组件修改父组件数据
- vue.js vue组件中style样式中的css引入背景图路径不对,解决方案
- 【笔记】vue中引用了其他组件 (比如Bus.js),如何使this重新指向当前组件?
- 原生JS修改标签样式为带阴影效果
- vue.js如何将echarts封装为组件一键使用详解
- 如何对第一个Vue.js组件进行单元测试 (上)