Vue及其第三方组件库的一些事

版本信息
vue:2.5.2
element-ui:2.0.7

• element-ui中badge数据不更新问题，如下代码

      <el-tabs v-model="index" ref="selectedLinked">
        <el-tab-pane label="tab1" name="1"/>
        <el-tab-pane name="2">
          <span slot="label" style="position: relative;">
            tab2
            <el-badge :value="page.selectedTotal"/>
          </span>
        </el-tab-pane>
      </el-tabs>

众多解释说是应为嵌套过深导致数据不更新，需要强制刷新 ，以下方法可以做到及时刷新。

this.$refs.selectedLinked.$children.forEach(child => child.$forceUpdate())

• vue中的样式，因为加 了scoped，无法修改第三方组件的样式问题

<!--  
在scoped中修改样式，只能修改本vue文件中的样式及引入第三方组件的根节点样式，至于第三方组件内部样式，是无法进行直接修改的。
网上得知有以下两种方法进行处理-->
<template>
  <div id="dig">
      <el-form class="border-form" :model="formName" :rules="rules" ref="dd">
          <el-form-item label="名称"  prop="seriesName">
            <el-input  v-model="formName.seriesName"  placeholder="请输入名称" size="small"              />
       </el-form-item>
       </el-form>
  </div>
</template>
<style scoped>
  /*法1：加>>>进行穿透*/
  #dig>>>.el-form-item__error {
    margin-left: -130px;
  }
  /*sass和less的样式穿透 使用/deep/*/
 #dig /deep/ .el-form-item__error {
    margin-left: -130px;
  }
</style>
<style>
 /*在外层style中写，但是要加前缀，只能影响本页面中的样式*/
  #dig .el-form-item__error {
    margin-left: -130px;
  }
</style>

• 其他