vue + elementui 通过父子组件实现弹框

在子组件中编写弹窗，在父组件中引用弹窗

文章目录

编写子组件
编写父组件
- 把子组件的弹窗引入到父组件中
- - 引入子组件
  - 方法
  - 注册子组件
- 通过$emit把子组件的值传入到父组件中
- 父组件接收子组件传来的值
- 通过v-if条件确定数据的显示与隐藏
整体代码参考

编写子组件

效果图：

代码：

<template><ModalComponentname="import-set"title="设置"size="85%"width="250px"@opened="handleOpenModal"@close="handleCloseMOdal"><div class="cont"><!-- 弹框 --><div class="father"><span>学院</span><el-switchv-model="gridData.college"@click="handleClick()"class="child"></el-switch></div><div class="father"><span>系</span><el-switch v-model="gridData.xi" @click="handleClick()" class="child"></el-switch></div><div class="father"><span>年级</span><el-switchv-model="gridData.grade"@click="handleClick()"class="child"></el-switch></div><div class="father"><span>行政班级</span><el-switchv-model="gridData.class"@click="handleClick()"class="child"></el-switch></div></div></ModalComponent>
</template>

<script>
import ModalComponent from "@/components/modal/index";
export default {data() {return {// 设置gridData: {college: true,xi: true,grade: true,class: true,},};},methods: {// 打开弹窗// 传参数e，为了写子节点之类的handleOpenModal(e) {console.log(e);},// 关闭弹窗// 关联handleCloseMOdal() {// this.$emit("change")触发子组件的自定义事件change,（也就是父组件中的 handleSetChange事件）// gridData是需要传递的参数this.$emit("change", this.gridData);},// 开关handleClick() {},},components: {ModalComponent,},
};
</script>

<style lang="scss" scoped>
.cont {width: 200px;.father {display: flex;justify-content: center;align-items: center;border-bottom: 1px solid $--color-border;padding: $grid 0;.child {margin-left: auto;margin-top: $grid;}}
}
</style>

编写父组件

效果：

自组件弹窗中的开关可以控制父组件中下拉选项和表格内容的显示与隐藏
比如：
弹框：

父组件：

把学院关掉，就不会显示学院的内容了

把子组件的弹窗引入到父组件中

引入子组件

import ImportSet from "./modal/set";

方法

methods: {// 设置handleSet() {// import-set 是子组件的name属性值this.$change.openModal("import-set");},
},

注册子组件

components: {// 设置ImportSet,},

使用子组件

 <!-- 设置 --><!-- @change="handleSetChange" 用change与子组件的值关联起来 -->
<ImportSet @change="handleSetChange"></ImportSet>

通过$emit把子组件的值传入到父组件中

通过handleCloseMOdal方法把子组件的值传入到父组件中

handleCloseMOdal() {// this.$emit("change")触发子组件的自定义事件change,（也就是父组件中的 handleSetChange事件）// gridData是需要传递的参数this.$emit("change", this.gridData);},

父组件接收子组件传来的值

父组件会通过handleSetChange方法接收接收子组件传来的值
定义接收的方法

<ImportSet @change="handleSetChange"></ImportSet>

编写handleSetChange方法

// 关联设置弹窗// 形参e的实参是 子组件中handleCloseMOdal传的参数 this.$emit("change", this.gridData) 中的 this.gridDatahandleSetChange(e) {// this.gridData 父组件的gridData// 把子组件的 this.gridData 传递给父组件的 this.gridDatathis.gridData = e;console.log("父组件的gridData");console.log(this.gridData);},

通过v-if条件确定数据的显示与隐藏

<el-dropdown v-if="gridData.college"><spanclass="el-dropdown-link"style="padding: 10px; border: 1px solid #000; border-radius: 5px">学院<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>大学1</el-dropdown-item><el-dropdown-item>大学2</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown v-if="gridData.xi"><spanclass="el-dropdown-link"style="padding: 10px; border: 1px solid #000; border-radius: 5px">系<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>软件技术</el-dropdown-item><el-dropdown-item>数字媒体</el-dropdown-item><el-dropdown-item>语文系</el-dropdown-item><el-dropdown-item>数学系</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown v-if="gridData.grade"><spanclass="el-dropdown-link"style="padding: 10px; border: 1px solid #000; border-radius: 5px">年级<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>19级</el-dropdown-item><el-dropdown-item>18级</el-dropdown-item><el-dropdown-item>17级</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown v-if="gridData.class"><spanclass="el-dropdown-link"style="padding: 10px; border: 1px solid #000; border-radius: 5px">行政班<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>一班</el-dropdown-item><el-dropdown-item>二班</el-dropdown-item><el-dropdown-item>三班</el-dropdown-item></el-dropdown-menu></el-dropdown>

整体代码参考

子组件

<template><ModalComponentname="import-set"title="设置"size="85%"width="250px"@opened="handleOpenModal"@close="handleCloseMOdal"><div class="cont"><!-- 弹框 --><div class="father"><span>学院</span><el-switchv-model="gridData.college"@click="handleClick()"class="child"></el-switch></div><div class="father"><span>系</span><el-switch v-model="gridData.xi" @click="handleClick()" class="child"></el-switch></div><div class="father"><span>年级</span><el-switchv-model="gridData.grade"@click="handleClick()"class="child"></el-switch></div><div class="father"><span>行政班级</span><el-switchv-model="gridData.class"@click="handleClick()"class="child"></el-switch></div></div></ModalComponent>
</template><script>
import ModalComponent from "@/components/modal/index";
export default {data() {return {// 设置gridData: {college: true,xi: true,grade: true,class: true,},};},methods: {// 打开弹窗// 传参数e，为了写子节点之类的handleOpenModal(e) {console.log(e);},// 关闭弹窗// 关联handleCloseMOdal() {// this.$emit("change")触发子组件的自定义事件change,（也就是父组件中的 handleSetChange事件）// gridData是需要传递的参数this.$emit("change", this.gridData);},// 开关handleClick() {},},components: {ModalComponent,},
};
</script><style lang="scss" scoped>
.cont {width: 200px;.father {display: flex;justify-content: center;align-items: center;border-bottom: 1px solid $--color-border;padding: $grid 0;.child {margin-left: auto;margin-top: $grid;}}
}
</style>

父组件：

<template><div><!-- 头部 --><div class="top"><div class="top-content"><el-button type="primary" disabled>新建学生</el-button><el-button type="primary" @click="handleOpenImport">批量导入</el-button><el-dropdown v-if="gridData.college"><spanclass="el-dropdown-link"style="padding: 10px; border: 1px solid #000; border-radius: 5px">学院<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>大学1</el-dropdown-item><el-dropdown-item>大学2</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown v-if="gridData.xi"><spanclass="el-dropdown-link"style="padding: 10px; border: 1px solid #000; border-radius: 5px">系<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>软件技术</el-dropdown-item><el-dropdown-item>数字媒体</el-dropdown-item><el-dropdown-item>语文系</el-dropdown-item><el-dropdown-item>数学系</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown v-if="gridData.grade"><spanclass="el-dropdown-link"style="padding: 10px; border: 1px solid #000; border-radius: 5px">年级<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>19级</el-dropdown-item><el-dropdown-item>18级</el-dropdown-item><el-dropdown-item>17级</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown v-if="gridData.class"><spanclass="el-dropdown-link"style="padding: 10px; border: 1px solid #000; border-radius: 5px">行政班<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>一班</el-dropdown-item><el-dropdown-item>二班</el-dropdown-item><el-dropdown-item>三班</el-dropdown-item></el-dropdown-menu></el-dropdown><el-dropdown><spanclass="el-dropdown-link"style="padding: 10px; border: 1px solid #000; border-radius: 5px">学籍状态<i class="el-icon-arrow-down el-icon--right"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item>未注册</el-dropdown-item><el-dropdown-item>在籍</el-dropdown-item><el-dropdown-item>休学</el-dropdown-item><el-dropdown-item>已离校</el-dropdown-item></el-dropdown-menu></el-dropdown><div class="demo-input-size"><el-inputplaceholder="请输入内容"suffix-icon="el-icon-search"v-model="input1"></el-input></div></div><!-- 三角 --><div class="triangle"></div><!-- 设置图标 --><iclass="el-icon-s-tools"style="float: right;cursor: pointer;margin-top: -35px;margin-right: 3px;"@click="handleSet"></i></div><!-- 中间 --><div class="center"><el-button type="primary" class="password" plain>重置密码</el-button><el-button type="primary" class="edit" plain @click="handelbatchedit">批量编辑</el-button><!-- 表格 --><el-tableclass="table"borderref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columnalign="center"prop="selectall"label="全选"width="100"type="selection"></el-table-column><el-table-column align="center" prop="name" label="姓名" width="100"></el-table-column><el-table-columnalign="center"prop="studentid"label="学号"width="100"></el-table-column><el-table-columnprop="college"label="学院"width="100"align="center"v-if="gridData.college"></el-table-column><el-table-columnprop="xi"label="系"width="100"align="center"v-if="gridData.xi"></el-table-column><el-table-columnalign="center"prop="professional"label="专业"width="100"></el-table-column><el-table-columnalign="center"prop="administrative"label="行政班"width="100"v-if="gridData.class"></el-table-column><el-table-columnalign="center"prop="grade"label="年级"width="100"v-if="gridData.grade"></el-table-column><el-table-column align="center" prop="gender" label="性别" width="100"></el-table-column><el-table-column align="center" prop="phone" label="手机" width="100"></el-table-column><el-table-columnalign="center"prop="status"label="学籍状态"width="100"></el-table-column><el-table-column align="center" prop="operation" label="操作"><template slot-scope="scope"><el-button@click="passwordreset(scope.row)"type="text"size="medium">密码重置</el-button><el-button type="text" size="medium" @click="handleedit(scope.row)">编辑</el-button></template></el-table-column></el-table></div><!-- 批量导入 --><ImportModal></ImportModal><!-- 编辑 --><ImportEdit></ImportEdit><!-- 批量编辑 --><ImportBatchedit></ImportBatchedit><!-- 设置 --><ImportSet @change="handleSetChange"></ImportSet></div>
</template><script>
import ImportModal from "./modal/index";
import ImportEdit from "./modal/edit";
import ImportBatchedit from "./modal/batchedit";
import ImportSet from "./modal/set";
export default {data() {return {input1: "",// 设置// 子组件把gridData值 传给了 父组件，为什么父组件还要写gridData// 因为 v-if会用到gridData中的属性，所以属性是一定要有的，属性值可以没有，如：college: true, 可以写为 college: "",gridData: {college: "",xi: true,grade: true,class: true,},// 表格tableData: [{name: "张三",studentid: "196300001",college: "河北软件",xi: "软件技术",professional: "前端开发",administrative: "一班",grade: "19级",gender: "女",phone: "15711111111",status: "在",},],};},methods: {// 关联设置弹窗// 形参e的实参是 子组件中handleCloseMOdal传的参数 this.$emit("change", this.gridData) 中的 this.gridDatahandleSetChange(e) {// this.gridData 父组件的gridData// 把子组件的 this.gridData 传递给父组件的 this.gridDatathis.gridData = e;console.log("父组件的gridData");console.log(this.gridData);},handleOpenImport() {this.$change.openModal("import-modal", { name: "123" });},// 编辑handleedit() {this.$change.openModal("import-edit", { name: "123" });},// 批量编辑handelbatchedit() {this.$change.openModal("import-batchedit", { name: "123" });},// 设置handleSet() {this.$change.openModal("import-set", { name: "123" });},handleSelectionChange() {},// 开关handleClick() {console.log("111");},},components: {// 批量导入ImportModal,// 编辑ImportEdit,// 批量编辑ImportBatchedit,// 设置ImportSet,},
};
</script><style lang="scss" scoped>
.top {width: 100%;height: 10 * $grid;background-color: $--color-white;margin-top: -10px;border-radius: 8px;//  三角.triangle {width: 0;height: 0;border-top: $grid * 5 solid $--color;border-left: $grid * 5 solid transparent;margin-top: -$grid * 5;float: right;}.top-content {//  width: 100%;height: $grid * 5;margin-left: $grid;//  background-color: red;line-height: $grid * 10;.el-dropdown-link {margin-left: $grid;}.demo-input-size {display: inline-block;width: $grid * 20;margin-left: $grid;margin-top: -$grid * 10;}}
}.center {background-color: $--color-white;margin-top: 10px;.password {margin-top: 2 * $grid;margin-left: 2 * $grid;}.table {margin-top: 4 * $grid;}
}
</style>

vue + elementui 通过父子组件实现弹框相关推荐

vue 带全选和多选的表格怎么写_vue+element-ui里面table组件多选框实现批量操作
vue+element-ui里面table组件多选框实现批量操作有时候人不是被困难难倒的,是被自己蠢哭的...官方文档用到某个地方的时候,才感觉对这个方面的理解才会加深一点,还是要记录一下这个地方! ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于"父子组件通信"的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰 ...
Vue之非父子组件通信
Vue之非父子组件通信非父子组件传值方法: 1:在model中新建一个js文件引入Vue 实例化Vue 最后暴露相关实例 // 引入vue import Vue from 'vue' // 创建 ...
基于vue element-ui 封装上传图片组件功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
学习目标: 我们在开发后台时肯定避免不了上传图片的功能例如: 上传图片回显上传完成 : 预览查看 , 删除等如果是图片列表,还可能让你拖动图片排序有的后台项目可能要给图片添加水印,添加标记有 ...
VUE|利用父子组件制作弹出框
博客主页:JavaProfessional 一个专注于Java的博主,致力于使用通俗易懂的语句讲解内容,期待您的关注! 文章目录点击显示弹框父组件子组件点击关闭弹框子组件父组件效果好文 ...
html c 中messagebox,Element-Ui组件 MessageBox 弹框
基础用法消息提示弹框 ``` 点击打开 Message Boxexportdefault{ methods: { open() {this.$alert('这是一段内容','标题名称 ...
vue element-ui之分页组件的封装
目录为什么要封装分页组件? 分页组件的封装如何使用? 为什么要封装分页组件? 分页组件用的最多的就是和表格一起,构成表格数据的翻页显示,当然也不仅限于表格,例如其它的流式加载.图片分批次加载等,都 ...
Vue.js-Day04-AM【父子组件通信（父传子、子传父）、动态组件、组件的生命周期、动画】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.复习父子组件通信 1.1.父传子(自定义属性) 1.2.子传父(自定义事件) 2.动态组件 2.1.实现 ...
ant design vue：upload打开选择文件弹框前弹出确认框
看antd文档,刚开始我用得beforeUpload来实现,勉强能完成我想要的功能,但是流程上不完美,需要先选择了文件,才能弹出确认框,但是我的确认框其实跟文件没有关系,我想要先弹确认框再打开文件选择 ...