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;//最后关闭弹窗子页面 }); },
希望上述能帮助到你