vue2组件嵌套的时候什么情况下scoped会失效以及怎么解决
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
这里用到了一个子组件
组件里边也很简单就有一个div
只是呢它的class也叫home
外层的容器里也有一个class=home
然后分别在这两个页面里
都定义了（各自的）home的背景颜色
大家看！按说的话呢
如果他用scoped来隔离这个样式
他应该是各有各的颜色对吧
我们来看一下（子组架是红色）
但是呢大家看
子组架的样式就没有生效
为什么会这样呢
原因是啊
他这个子组件
把这class写在了
这个template里边的第一层的DIV里边
这个DIY会有什么问题呢大家看
我们检查一下这个元素
看这个div里面有两个这个唯一的标识
两个唯一标识意味着什么呢
我们再来看一下它生成的home样式
在这里比如说这两个组件的HOME
都能命中这个子组件
也就意味着我后写的（口误：后生成）这个home就会生效
通常来说父组件的样式是在后面的
所以子组件的就被覆盖掉了
所以解决这个问题呢有两个方案
那第一个方案呢就是
既然他会把第一层生成两个
那个唯一标识
那我们就再套一个div（在外层）
让他把这个
生成两个的标识放在这一层上
这样的话呢就只有
子组件的这个.home可以命中这个子组件
我们来看一下
这样就行了
我们再来看下生成的
看看外层的这个有两个标识
这个772是父组件的
然后呢这个C40是子组件的
然后再往下看
这个子组架就只有一个唯一标识了
这样的话呢就只有那一个.home能命中他
那第二个方案呢
我先把这些回复一下哈
如果这块不改怎么处理呢
我们就要从这个权重上来考虑
来搜一下
既然他的位置在前面
那我们就想办法提高他这个权重值
现在他权重值是0-2-0对吧
一个类样式一个属性选择器
关于权重的问题
大家可以看这期视频啊
那我们怎么提高他的权重呢
我们可以在这再写一个点home
注意不要有空格
.home 连着再写一个.home
这样的话呢
大家看
虽然他在前面但是他的权重值高了
变成0-3-0了
两个类样式一个属性选择器
所以呢这子组件就可以应用上了