vue element 的el-dialog弹框不刷新，插入组件不刷新

vue的爬坑之路

之前做项目的时候作为小白的我在使用element-ui的弹框el-dialog的时候弹框里面插入的是一个组件，因为是组件的问题导致每次点击弹框的时候页面组件里面的值没有进行刷新。

其实简单的情况下v-if可以解决这个问题 但是这个时候弹框页面是组件，vue组件渲染之后再次点击需要刷新不然不会重新渲染页面（主要是新增和编辑页面都是同一个页面导致的）。这就让我很尴尬但是纠结了很久。其实解决方法很简单就是在子组件（弹框引入的组件）里面加上一个watch监听值的变化就可以了。

直接上代码吧
弹框：

            <el-dialog
              v-drag-dialog
              v-if="addView"
              title="方案公式管理"
              :visible.sync="addView"
              width="85%"
              modal center
            >
              <div>
                <SolutionCalculationForm for-view="true" :inspection-plan-id="inspectionPlanId"
                                          @addForHidden="addForHidden" :solution-calculation-ids="solutionCalculationIds">
                </SolutionCalculationForm>
              </div>
            </el-dialog>

子组件就是这里的 SolutionCalculationForm 只展示主要的watch部分了

    watch: {
      'solutionCalculationIds': function () {
        this.solutionParametersId = this.solutionCalculationIds;
        if (this.solutionParametersId)//编辑
        {
          this.findSolutionParametersForEdit(this.solutionParametersId);
        } else//新增
        {
          this.createSolutionParameters();
        }
      }
    },

    created() {
      // this.solutionCalculationId = this.$route.params.solutionCalculationId;
      this.solutionCalculationId = this.solutionCalculationIds;
      if (this.solutionCalculationId)//编辑
      {
        this.findSolutionCalculationForEdit(this.solutionCalculationId);
      } else//新增
      {
        this.createSolutionCalculation();
      }
    },

这种情况主要是让数据双向绑定情况下，可以有新数据，或者重新获取一个空数据。主要是通过watch实现监听父组件传来的那个值。