Vue 组件css作用域 --scoped

2018-12-27  本文已影响0人  祝名

1. 在将子组件Users.vue引入App.vue使用的情况下,两组件都有好h1标签。在App.vue中给h1标签设定样式,两个h1标签都变紫色。控制台中有两个style标签


2.如果在Users.vue中加入另一个h1标签样式,将颜色设为绿色(原App.vue文件中的样式还是设为紫色),会发现两个h1标签均变为绿色。


3. 如果想每个组件,展示各自的样式,就要在每个组件文件的style中加上scoped。在控制台中我们可以看到,每个h1后面跟着的data数据号是与各自样式一一对应的。因此,实现了各自匹配的效果。



上一篇 下一篇

猜你喜欢

热点阅读