今天在做一个弹窗的时候，发现某一列数据重复点击，就获取不到我要的id，原来是因为监听的值没有改变，所以子组件不走监听这个代码，那么我的功能就做不了了，怎么办呢？经过好心群友的帮忙，采用v-if的方式可以解决这个问题。

1.父组件

<!-- 父组件 -->
<template>
  <div class="">
    <!-- //利用vif对页面进行销毁 -->
    <settle-accounts
      v-if="showChild"
      ref="settleAccounts"
      :formData="formData"
      @handleSubmit="handleRefresh"
      @close="close"
    ></settle-accounts>
  </div>
</template>

<script>
import * as Api from '@/api/supplier/list'
import settleAccounts from './modules/settleAccounts'
export default {
  components: {
    settleAccounts,
  },
  data() {
    return {
      showChild: false,
    }
  },
  methods: {
    close(type) {
      console.log('父组件close', type)
      this.showChild = false
    },
    //父组件点击按钮打开弹窗方法
    showModal(item) {
      this.showChild = true
      this.formData = item.settle_id //子组件弹窗打开以后，再对数据进行传输，父传子数据才能传输过去
    },
  },
}
</script>

2.子组件

<!--  -->
<template>
  <div class="settleAccount">
    <a-modal title="申请核销" :visible="visible" @ok="handleSubmit" @cancel="handleCancel">
      <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="结算ID">
          <a-input-number disabled v-decorator="['settle_id', { rules: [{ required: true, message: '结算ID!' }] }]" />
        </a-form-item>
    
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import * as Api from '@/api/supplier/list'
export default {
  props: ['formData'],

  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 12 },
      formLayout: 'horizontal',
      form: this.$form.createForm(this),
      visible: true,
    }
  },
  watch: {
    formData: {
      handler(newVal, oldVal) {
        console.log(`newVal：${newVal},oldVal：${oldVal}`)
        this.$nextTick(() => {
          this.form.setFieldsValue({
            settle_id: newVal,
          })
        })
      },
      immediate: true,
    },
  },
  methods: {
// 关闭弹窗
    handleCancel(e) {
      console.log('取消核销')
      this.visible = false
      this.form.resetFields() //关闭弹窗以后清空表单数据
      this.$emit('close','0') //关闭弹窗通知父组件的close方法
    },
  },
}
</script>