以下内容中,父页面为 lineInspection.vue,子页面为addEquip.vue
在这里插入图片描述
在父页面中,写子页面弹框:
(1)通过@getData接收子页面传过来的值
(2)通过 :navigateId="navigateId"直接向子页面传值

<template>
	<div>
		<el-dialog title="添加设备" :visible.sync="showAddEquip" v-if="showAddEquip" width="80%" top='110px'  lock-scroll @close ='closeDialogs()'>
        	<addEquip :cxId = treeId :navigateId="navigateId" @getData="equipId"  @closeDialogs='closeDialogs()' @GetEquipmentInLine="GetEquipmentInLine()"></addEquip>
    	</el-dialog>
	</div>
</template>

<script>
import addEquip from '@/components/addEquip.vue'
export default {
	components: {
    	addEquip
  	},
  	data(){
  		return {
  		}
  	},
  	methods: {
  		closeDialogs() { //页面关闭方法
           this.showAddEquip = false;
        },
        //GetEquipmentInLine为接口方法,此处没有具体写方法内容
  	},
}
</script>

子页面使用prop接收父页面参数 、以及子页面向父页面传值:

(1)通过 this.$emit(“getData”,this.equipId); 子页面向父页面传值;

(2)通过 this.$emit(‘GetEquipmentInLine’, false); 子页面调用父页面方法

<script>
export default {
	 props: {
    	cxId: {
     	 	default: "",
      		type: String,
    	},
    	navigateId: {
      		default: "",
      		type: String,
    	},
    // GetEquipmentInLine:{
    //   type: Function,
    //   default: () => {}
    // } 方法接收可不写,此处就没有写closeDialogs方法的接收
  },
  	data(){
  		return {
  		
  		}
  	},
  	methods: {
  		serach(){
        	console.log("查询")
        	this.$emit("getData",this.equipId);//子页面向父页面传值
        	this.$emit('GetEquipmentInLine', false);//调用父页面方法
    	},
  	},
}
</script>
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐