vue中父页面与子页面传值,子页面调用父页面方法
vue中父页面与子页面传值,子页面调用父页面方法
·
以下内容中,父页面为 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>
更多推荐
已为社区贡献1条内容
所有评论(0)