vue中style的scope属性

在vue项目中通常会给style标签加上scope属性，以此来实现样式的私有化，避免全局污染。
但有的时候这个属性又会带来麻烦：当引入第三方组件且需要修改其样式时，通常出现没有修改成功的情况

一、scope实现私有化样式的原理

通过给DOM元素结构上以及css样式上添加一个不重复的标记，来保证其唯一性，以此达到样式的私有化

例如：当使用第三方插件elementui的button、dialog组件，并在style标签上加上scoped的属性

<template><div class="login-page"><h1>{{ msg}}</h1><div><el-button type="success" @click="login">登录</el-button><el-button type="success" @click="dialogVisible = true">弹框</el-button></div><el-input></el-input><div><el-dialog
        title="提示1111"
        :visible.sync="dialogVisible">
        这是一个弹框</el-dialog></div></div></template><style lang="less" scoped>
  @import"../less/login.less";</style>

login.less文件

.login-page{
  h1{
    cursor: pointer;
    background:#f00;}
  .el-button{
    width: 200px;}
  .el-input{
    width: 100px;}
  
  .el-dialog{
    width:200px;
    height: 300px;
    background:#ddd;}}

在浏览器运行后的DOM显示结果为：

1、el-button元素加上了data属性，且其css也加上了data属性选择器

2、el-dialog组件元素只有最外层元素有data属性，从第二层元素起就没有，且虽然在login.less文件中改变其样式，但是没有效果

由此可以看出：

1、添加scoped属性之后，DOM节点添加了一个不重复的data属性来表示其唯一性

2、添加scoped属性之后，DOM节点的css选择器末尾添加了data属性选择器来私有化该元素的样式

3、添加scoped属性之后，会给组件的最外部添加data属性，如果组件里面还有包含其他组件，那么其他组件是作用不到的

二、解决引入第三方组件并修改其样式不生效的问题

1、解决方案一：因为vue文件中可以出现多个style，所以可以使用两个style，一个style加上scoped属性，一个style不加scoped属性，

且将第三方组件中嵌套的元素样式放置在不带scoped的style元素内，这样子第三方组件中的嵌套元素中样式就可以生效了

<template><div class="login-page"><h1>{{ msg}}</h1><div><el-button type="success" @click="login">登录</el-button><el-button type="success" @click="dialogVisible = true">弹框</el-button></div><el-input></el-input><div><el-dialog
        title="提示1111"
        :visible.sync="dialogVisible">
        这是一个弹框</el-dialog></div></div></template><style lang="less" scoped>
  @import"../less/login.less";</style><style lang="less">
   .el-dialog{//将第三方组件中嵌套的元素样式放置在不带scoped的style元素内，这样子第三方组件中的嵌套元素中样式就可以生效了
      width:200px;
      height: 300px;
      background:#ddd;}</style>

login.less文件

.login-page{
  h1{
    cursor: pointer;
    background:#f00;}
  .el-button{
    width: 200px;}
  .el-input{
    width: 100px;}}

2、解决方案二：使用深度选择器： <<< 或者 /deep/

穿透性的改变第三方组件的样式需要加上deep,如果是stylus使用 >>> ,如果是less 或者sass就使用 /deep/

<template><div class="login-page"><h1>{{ msg}}</h1><div><el-button type="success" @click="login">登录</el-button><el-button type="success" @click="dialogVisible = true">弹框</el-button></div><el-input></el-input><div><el-dialog
        title="提示1111"
        :visible.sync="dialogVisible">
        这是一个弹框</el-dialog></div></div></template><style lang="less" scoped>
  @import"../less/login.less";</style>

login.less文件

.login-page{
  h1{
    cursor: pointer;
    background:#f00;}
  .el-button{
    width: 200px;}
  .el-input{
    width: 100px;}
  //穿透性的改变第三方组件的样式需要加上deep,如果是stylus使用>>>  ,如果是less 或者sass就使用  /deep/
  /deep/.el-dialog{
        width:200px;
        height: 300px;
        background:#ddd;}}

el-dialog成功产生效果为所自定义的样式：