vue中父页面与子页面传值，子页面调用父页面方法

最新推荐文章于 2024-04-06 12:08:07 发布

还没想好叫啥~

最新推荐文章于 2024-04-06 12:08:07 发布

阅读量2.5k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_52613927/article/details/128573055

版权

以下内容中，父页面为 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>