scope(三)

前面两节讲了没有scoped的可以直接修改,现在讨论下把scoped这个属性去掉会是怎么样

1.准备的两个页面

 

 

放置的两个时间属性。

2.有hash值的页面

 

 

 3.对比:另外的页面

 

可以看出只修改了当前页面的值

4.去掉scoped对比

 

 

两个页面多发生了更改,scoped对当前的页面起到一个保护的作用。

5.加上scoped之后

1.有scoped的可以直接修改

 

2.没有scoped的需要穿透

 

 页面没有反应

穿透后

 

 多出来了一个data的hash属性来保护当前的作用域不被污染。

6.练习

 

 

从布局来看关联的是整个大盒子

修改字体的样式

 可以直接进行修改

 修改当前的背景色

 

无任何的变化

穿透后

控制台的表现 

继承了大盒子的data值,不加deep无法继承,因而无法改变样式。

7.总结

1.scoped控制了当前作用域,不被污染

2.用组件的时候,通常大盒子包裹着大盒子，并有data属性,外层可以直接修改

3.后续没有data属性 通过deep来继承前者的属性。