项目场景：

知识产权模块

问题描述

子组件的新增和编辑弹窗共用，现需编辑弹窗隐藏文件上传

解决方案：

> 1.子组件点击编辑按钮： @click="handleEdit(record)"
> 2.在子组件methods中传递数据给父组件： this.$emit("handleEdit","编辑") 
> 3.在父组件的子组件标签中接收： <son  @handleEdit="handleEdit"  />
> 4.在父组件的data中定义显示与隐藏的初始值： fileHidden: true,
> 5.在父组件的methods中定义接收的方法根据参数判断显示与隐藏：
> handleEdit(index) {
      if(index == '编辑') {
        this.fileHidden = false
      }
    }
> 6.再把结果通过子组件标签反馈给子组件： <son :fileHidden="fileHidden"  />
> 7.在子组件里接收数据： props: ['fileHidden'],
> 8.在item上加 v-if="接收的数据":  <a-form-model-item label="文件" v-if="fileHidden"></a-form-model-item>

效果：

具体实施：

父组件：

<!-- 切换区域 --> 
<son @handleEdit="handleEdit" :fileHidden="fileHidden" />  

<script>
// 子组件引入
import son from './son.vue'
export default {
	components: {son}
	data() {
		return {
			fileHidden: true,
		}
	},
	methods: {
		handleEdit(index) {
	      if(index == '编辑') {
	        this.fileHidden = false
	      } else {
        	this.fileHidden = true
      	  }
    	}
	}
}
</script>
      

子组件：

<a-modal @cancel="cancelupload">
	<a-form-model-item label="文件" prop="abstractInfo" v-if="fileHidden"></a-form-model-item>
</a-modal>
<script>
export default {
	props: ['fileHidden'],
	methods: {
		// 点击事件
	    handleEdit(record) { 
	      this.$emit("handleEdit","编辑")
	    },
	    // 弹窗关闭
	    cancelupload() { 
	      this.$emit("handleEdit","新增")
	    },
	}
}
</script>