VUE调用子页面弹窗或组件弹窗,关闭弹窗刷新父级页面主页面,通过this.$emit来实现
Vue 用this.$refs调用子页面窗口,关闭窗口用this.emit刷新父页面this.$emit是父级向自己传值第一步在父级页面创建自己页面的引用<template><div><edit ref="edit" @refresh="search"></edit> //@refresh 这个命名可以自己改,edit是你子页面名字,search是我
·
Vue 用this.$refs调用子页面窗口,关闭窗口用this.emit刷新父页面
this.$emit是父级向自己传值
第一步在父级页面创建自己页面的引用
<template>
<div>
<edit ref="edit" @refresh="search"></edit> //@refresh 这个命名可以自己改,edit是你子页面名字 ,search是我的方法名,ref就是我调用子页面弹窗的名字
</div>
</template>
<script>
import Edit from "./Edit";//引用子页面,我直接点 ./Edit是在我同一文件夹下的文件
export default {
components: { Edit },//实例一下子页面
methods: {
search(id) { //上面 @refresh调用的方法就是自己定义的
this.axios.post("/api/xxx/xxx", this.filter).then((res) => {
});
},
edit() {
this.$refs.edit.search();//跟上面引用的子页面 ref名字一样exit,search是子页面的方法
},
}
第二步就简单了在子页面结束的时候使用父级的方法就可以了
<template>
<el-dialog //要是弹窗就要加不然不能识别问弹窗,不然就是跳转页面或者报错
:title="title"//页面左上角弹窗名字
:visible.sync="visible" //弹窗显示或者关闭
:modal-append-to-body="false"
:close-on-click-modal="false"
>
</el-dialog>
</template>
export default {
data() {
return {
title: "",
visible: false,
};
},
search(id) { //父级页面this.$refs.edit.search();调用的search就是自己定义的
this.visible=true;//让弹窗显示出来
this.title='给弹窗命名';
this.axios.post("/api/xxx/xxx", this.filter).then((res) => {
this.$emit("refresh", 1);//这就是刷新子集,顺着来处父级@refresh调用父级页面,而进入父级主页面会进到初始方法
//父级就会调用写好的方法,后面的1就是往方法里面传参数,也可以不写
this.$emit("refresh"); //这是不用传参数的
this.visible=false;//最后关闭弹窗子页面
});
},
希望上述能帮助到你
更多推荐
已为社区贡献6条内容
所有评论(0)