vue 子页面调用父页面方法、回写父页面数据
使用$emit父页面,通过@fatherMethod传递方法<template><!--申请退回--><el-dialog title="申请退回" ><applyReturn @fatherMethod="initBtn"></applyReturn></el-dialog></template><scri
·
方法一
推荐使用:this.$parent
// 调用父类的方法
this.$parent.getlist()
// 给父页面对象赋值
this.$parent.proForm = response.data
例:
methods: {
// 页面点击方法
getCurrentRow(row) {
// this.$parent. 指向父页面对象赋值
this.$parent.orgForm = row
},
}
方法二
使用$emit
父页面,创建方法 initBtn(),
调用子页面的时候使用 @ 给方法起个别名 @fatherMethod="initBtn" 传递方法到子页面
<template>
<!-- XXXX弹框 -->
<el-dialog title="我是一个引用弹框" :visible.sync="isWithdrawFrame">
<applyReturn @fatherMethod="initBtn" @close="isWithdrawFrame=false" ></applyReturn>
</el-dialog>
</template>
<script>
import applyReturn from '@/views/reportManager/applyReturn.vue'; //引入弹框页面
export default {
components: {
applyReturn,//添加组件
},
methods: {
// 初始化方法
initBtn(val){
// 操作逻辑
fa.name = val.name
fa.code= val.code
}
}
</script>
子页面使用$emit 接收父页面传的方法别名调用。 (这边可以把子页面参数传给父页面,只需要在initBtn括号中设置参数即可)
<template>
<div>
<button @click="comSave">提交</button>
</div>
</template>
<script>
export default {
methods: {
comSave() {
// 调用父页面传递来的方法,逗号后面可以传递参数
this.$emit('fatherMethod', row);
}
}
};
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)