用scoped解决vue组件的样式覆盖问题

前言

scoped 是Vue文件中的style标签上有一个特殊的属性。 有了 scoped, 在style标签拥有scoped属性时候， 会使目标css样式只能用于当前的Vue组件， 这样的好处是让组件的样式不相互污染。

样式覆盖的问题

如上所示, 默认组件中的style定义的样式是全局的, 可能会出现样式覆盖的问题

解决办法

只需要在style标签上加上scoped, 就能轻松解决样式私有的问题

    <stype scoped>
      h2 {} // 样式只会在当前组件内生效
    </style>

实现原理

在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性,这样就能轻易地区分相同的标签样式,极大程度低解决样式覆盖的问题

总结

style上加scoped, 组件内的样式只在当前vue组件生效；如果不加scoped的话,样式会出现覆盖的问题。