scope组件穿透

今天我们以单选框为例来探究一下样式的穿透问题

1.代码

2.效果

 

3.控制台的结构

 

4.问题

为啥最外层的大盒子可以直接修改,而里面的表单和文字需要用穿透的方式去修改呢？

特点:

最外层的大盒子是有hash值的

 里面的小盒子是没有hash值的

里面的两个小盒子

 这些代码都是来自与第三方组件element-ui,所以要修改里面组件的内容,需要用到第三方

5.其它组件的测试

1.代码

 

2.组件的结构

 外层里面的大盒子和里面的小盒子

根据以上推导,里面的小盒子需要穿透来改变，外层的大盒子可以直接修改。

测试

外层的盒子

 

里面的小盒子----没有deep的情况下

 

里面的小盒子----有deep的情况下

 

6.总结

看见如果有hash值的盒子是可以直接修改的,如果没有则需要第三方deep来穿透。