1. style 中 scoped 会使 修改的样式 不成功

<style scoped  lang="scss">
@import "../../assets/scss/multipleTest.scss";
.multiple-div {
  display: flex;
  height: 100%;
  flex-direction: column;
  // height: 100vh;
  padding: 0 0 0 20px;
  span {
    margin-top: 16px;
    font-size: 24px;
    text-align: left;
  }

  .multiple-a-tabs {
    text-align: left;
  }
   .ant-tabs-bar {
   display: flex;
   justify-content: space-between
  }
 
}

</style>

2.如果去掉 scoped 会使 修改的样式成功，但是也会导致其他页面的样式变化

3.使用 /deep/ 完美解决

<style scoped  lang="scss">
@import "../../assets/scss/multipleTest.scss";
.multiple-div {
  display: flex;
  height: 100%;
  flex-direction: column;
  // height: 100vh;
  padding: 0 0 0 20px;
  span {
    margin-top: 16px;
    font-size: 24px;
    text-align: left;
  }

  .multiple-a-tabs {
    text-align: left;
  }
 /deep/  .ant-tabs-bar {
   display: flex;
   justify-content: space-between
  }
 
}

</style>

vue通过js动态修改元素的样式，如果是固定的几个样式，我常用的是绑定元素的calss,给不同的class写好需要的样式，js控制是否使用这个class。

但是最近遇到这么一个需求，文字可以让用户通过取色器选择不同的颜色，选择颜色后动态更新展示文字效果。

这样获取到的颜色是一个很庞大的数据，根本不可能提前写好，也就是不能通过class的方式处理。那么怎样直接修改元素的style属性呢?

方法1—vue的v-bind指令

其实vue提供了绑定style属性的方法，并且和绑定class是写在一起的，但是，这么久以来我竟然一点印象也没有，也是很不可思议的一件事了。
这里给上vue绑定style的文档地址：https://cn.vuejs.org/v2/guide/class-and-style.html#对象语法-1
具体使用：

<template>
... 省略 ...
<el-row>
  <el-col :span="12">
    <el-form-item label="模板标题:" prop="titleName">
      <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
      </el-input>
    </el-form-item>
    
    <el-form-item label="标题颜色:">
      <!-- 取色器插件 -->
      <colorPicker v-model="titleColor"></colorPicker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="内容示例:" prop="" >
      <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
        <!-- v-bind缩写为":" -->
        <div :style="{color: titleColor}">{{searchForm.titleName}}</div>
      </div>
    </el-form-item>
  </el-col>
</el-row>
... 省略 ...
</template>

<script>
export default {
  data: () => {
    return {
      titleColor:'#000000',
      searchForm: {
        titleName: ''
      }
    }
  },
  methods: {}
}
</script>

使用v-bind绑定元素的style属性，js中连methods的部分都不用写了

方法2—js原生获取元素

这里的取色器插件可以绑定change事件，那么我们可以在取色器改变的时候取设置元素的style。
我首先想到的就是js原生的方法
具体使用：

<template>
... 省略 ...
<el-row>
  <el-col :span="12">
    <el-form-item label="模板标题:" prop="titleName">
      <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
      </el-input>
    </el-form-item>
    
    <el-form-item label="标题颜色:">
      <!-- 取色器绑定change事件 -->
      <colorPicker v-model="titleColor" @change="changeColor"></colorPicker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="内容示例:" prop="" >
      <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
        <!-- 给元素添加class,也可用id -->
        <div class="title-color">{{searchForm.titleName}}</div>
      </div>
    </el-form-item>
  </el-col>
</el-row>
... 省略 ...
</template>

<script>
export default {
  data: () => {
    return {
      titleColor:'#000000',
      searchForm: {
        titleName: ''
      }
    }
  },
  methods: {
    changeColor (val) {
      // 1. 这个取色器change事件直接获取的就是带"#"的十六进制颜色
      // 2. 如果用的是id，这里就换成js获取id的方法；如果vue中引入了jQuery，这里也可以用jQuery的方法
       document.getElementsByClassName('title-color')[0].style.color = val	
    }
  }
}
</script>

方法3 — vue的$refs属性获取元素

和方法2一样，通过取色器的change事件获取修改的颜色，但是在获取元素的时候不用原生而用vue的实例属性$refs。
vue 文档中提到，当ref在普通的DOM元素上使用，引用指向的就是DOM元素，因此我们可以用这点来获取我们要的元素。

vue $refs的文档：https://cn.vuejs.org/v2/api/#vm-refs
vue ref的文档：https://cn.vuejs.org/v2/api/#ref
具体使用：

<template>
... 省略 ...
<el-row>
  <el-col :span="12">
    <el-form-item label="模板标题:" prop="titleName">
      <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
      </el-input>
    </el-form-item>
    
    <el-form-item label="标题颜色:">
      <colorPicker v-model="titleColor" @change="changeColor"></colorPicker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="内容示例:" prop="" >
      <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
        <!-- 使用ref给元素注册引用信息 -->
        <div ref="titleNameRef">{{searchForm.titleName}}</div>
      </div>
    </el-form-item>
  </el-col>
</el-row>
... 省略 ...
</template>

<script>
export default {
  data: () => {
    return {
      titleColor:'#000000',
      searchForm: {
        titleName: ''
      }
    }
  },
  methods: {
    changeColor (val) {
      // 通过$ref来获取
      this.$refs.titleNameRef.style.color = val	
    }
  }
}
</script>

使用VUE组件时，有时候我们会修改组件的样式，比如修改颜色的等

最近项目使用react发现，react的组件可以在父组件里面修改其样式，vue文档里面是这样说的（Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。），所以当修改vue组件样式就需要用以下方法了

1、混合使用全局属性和局部属性

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

修改组件的样式写在 /* global styles */ 里面，缺点就是样式变成全局样式，会修改整个项目里面的样式 ，
优化后方法

<style scoped>
/* local styles */
.example {
  color: red;
}
</style>
<style>
	/* global styles */
	.header > div{
	  color: red;
	}
</style>
<template>
  <div class="example">
	<Header class=‘header’></Header>	
  </div>
</template>

给组件一个class ，然后通过修改class里面的样式修改全局样式，减少全局样式污染

2、深选择器

如果想对设置了scoped的子组件里的元素进行控制可以使用 ’>>>’ 或者 ’deep’

<template>
  <div id="app">
    <Header></Header>
  </div>
</template>

<style lang="css" scoped>
  .Header /deep/ .name{ //第一种写法
    color:red;
  }
  .Header >>> .name{   //二种写法
    color:red;
  }
</style>

<div class="Header">
  <div class="name"></div>
</div>

一些预处理程序，例如sass不能解析>>>属性，这种情况下可以用deep，它是>>>的别名，工作原理相同。

快过年了，还在上班，看着别人都回去了，老板不给请假，心里一万个草泥马跑过。。。。。。。。。。