Vue scoped 踩坑记录

Vue scope 踩坑记录

今天在写Vue组件的时候,遇到了一个坑，以为自己代码写错了，或是因为CSS的权重问题,排查了一个小时,最后发现原来是自己对Vue的细节不熟悉,没有看出来。

这是一个简单的分页,使用了element的分页组件，我发现它和我的页面颜色不搭配，想更改颜色，原来的思路是复制这个类，直接替换他的样式，因为是一个组件，也不会影响其他的效果。

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ff6600;
  color: #FFF;
}

但是我发现效果出不来，傻眼了，以为是Css的权重问题，整了半天，发现里面根本没有自己写的样式，之后以为自己的类写错了，或者是嵌套问题，又整了半天，发现也没有解决，最后发现罪魁祸首在这里

我是用了一个scoped标签，这个记得当初在看视频的时候说是有了这个，就可以给里面的样式生成一个唯一的class，让样式不会覆盖，当时觉得这个功能还挺好用，但是忘了后半句话 😂,这个不推荐使用，尽量自己写，因为会有一些奇怪的问题，我是用webstorm写的，这个在生成Vue组件的时候会自动加上，我也没太注意，去掉后就正常了。之后看了Vue官方的介绍，发现了一段话。

当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不需要任何 polyfill。

也就是说这个组件里面的样式只能对当前页面的样式起作用，我想在这里改element-ui的样式，当然是想桃子。

我的解决办法是，写了两个script标签，一个加scoped放正常的代码，另一个里面不加scoped只写element更改样式代码，麻烦算是解决了。

这件事说明了，有时间还是多看看文档，毕竟不知道什么时候就再踩坑了 。