vue 在父组件里阻止子组件的点击事件

Question

子组件的代码

<template>
    <div>
      <div class="show">
        <div class="picture" :style="'backgroundImage:url('+headerImage+')'" @click="addPic"></div>
      </div>
      <div>
        <input ref="file" type="file" accept="image" @change="upload($event)"  style="display:none">
      </div>
    </div></template>
 <script>
  import Exif from 'exif-js'
  export default {
    data() {      return {        headerImage: '/static/images/add.jpg',        picValue: ''
      }
    },    methods: {
      addPic() {        let file = this.$refs.file
        file.click()   ←  这块是点击div 触发点击input file的点击事件
      },
   }

父组件

<div class="upload">
     <label for="">法人身份证</label>
     <div class="frontimg">
         <uploading @backImg="backImg"></uploading>
         <p>{{text}}</p>
     </div>
</div>
    methods:{
        backImg(img) {                this.legalPersonImage = img;                this.text = '重新上传'
                if (this.text == '重新上传') {                    this.submit();
                }
            },
    }

应该怎么写 能在满足一种条件下 清除点击事件 求教

Answer 1

传一个prop进去就行，比如传进去的prop为flag，addPic方法体里面根据flag的值判断是否执行input file的点击事件，flag为true的时候执行，flag为false的时候不执行