vue子页面调用父页面的方法v-on

最新推荐文章于 2025-07-11 17:56:16 发布

miao哈哈

最新推荐文章于 2025-07-11 17:56:16 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

文章标签： vue typescript element v-on 子页面调用父页面的方法

本文链接：https://blog.youkuaiyun.com/zyj_princess/article/details/84876868

本文介绍了一种在子页面提交表单并关闭后，触发父页面查询列表刷新的实现方法。通过在父页面绑定子页面事件，子页面可通过调用特定方法通知父页面进行数据更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当子页面提交表单关闭页面，需要刷新父页面，也就是调用父页面查询列表的方法

1，首先在父页面先对需要调用的方法进行绑定

  <el-dialog width="90%" :visible.sync="data.dialogFormVisible" >
              <ViewListUser v-if="data.dialogFormType==DIALOG_FORM_TYPE_ADD" :departmentId="data.departmentId" v-on:closeDialog="closeDialog" v-on:getFirstDeptOfUsers="getFirstDeptOfUsers"></ViewListUser>
          </el-dialog>

2，在子页面定义事件声明在父页面绑定过的方法

          //定义事件
          @Emit("closeDialog")
          closeDialog(addSuccess:boolean){}
          //定义事件
          @Emit("getFirstDeptOfUsers")
          getFirstDeptOfUsers(departmentId:string){}

3，就可以子页面调用声明的方法啦

  
   this.getFirstDeptOfUsers(this.departmentId);