ElementUI Dialog 对话框父子页面方法调用

摘要 普通弹出框，新增完之后，需要刷新主页进行查询或者其它操作功能实现；

一、父页面调用代码如下：

依赖进来
<el-dialog  :visible.sync="menuRoleVisible" append-to-body><menu-role @getList="getList" v-if="menuRoleVisible" ref="menuRole"></menu-role>
</el-dialog>引入视图
import MenuRole from '@/views/tw-manager/MenuRole.vue'components: { Pagination ,MenuRole},

具体如下图：

二、子界面代码实现

<template><div class="widget-content"><el-button type="primary" size="mini" @click="save" style="">调用主界面的查询功能</el-button></div>
</template>
<script>export default {data(){return{roleId:"",title:["已有菜单权限","可选菜单权限"],mode: "transfer", // transfer addressListfromData:[],toData:[]}},methods:{//初始化数据dataInitialization(id){console.log(id)},save(){this.$emit('getList')}}}
</script>

细节：子界面主要调用父页面弹出时定义的 @getList=“getList” 内容；通过@进行映射调用到父页面具体的方法；

实现页面图如下：

点击弹出框按钮效果如下：

由此可得到子界面弹出框形式，新增 、修改后要调用父界面方法，可参考以上方法实现；

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！