点击显示弹框

显示弹框需要父组件有一个控制显隐的变量，并且通过传递给子组件的控制显隐的变量。

父组件

添加一个按钮

<div class="handle-box"><el-button type="primary" @click="openChild">新增</el-button><book-type-table-add :isVisible="addVisible"></book-type-table-add>
</div>

添加控制显隐的变量以及点击方法：

data() {return {bookTypeDialogVisible: false, // 添加控制显隐的变量
},
methods: {popUp(){this.bookTyoeDialogVisible = true; // 点击popUp方法，将显隐变量设置为true}
},

在父组件中添加子组件

import BookTypeTableAdd from "./BookTypeTableAdd.vue";export default {components: {BookTypeTableAdd},data() {return {bookTypeDialogVisible: false, // 添加控制显隐的变量},methods: {popUp(){this.bookTyoeDialogVisible = true; // 点击popUp方法，将显隐变量设置为true}},
}

<div class="handle-box"><el-button type="primary" @click="openChild">新增</el-button><book-type-table-add :isVisible="addVisible"></book-type-table-add>
</div>

子组件

监听值的变化，并赋给本地变量

<template><el-dialog :title="添加" v-model="visible"></el-dialog>
</template><script>export default {name: "BookTypeTableAdd",props: {isVisible: { //父组件传值type: Boolean,default: false}},data(){return{visible: false}},watch: {isVisible(oldVal, newVal) { // 监听父组件传值console.log("watch isVisible")this.visible = this.isVisible}}};
</script><style scoped></style>

点击关闭弹框

当子组件控制显隐的变量被置为false，我们还需要向父组件传值，修改父组件的值。

子组件

<template><el-dialog :title="添加" v-model="visible" @close="handleClose"></el-dialog>
</template>

methods: {handleClose(){console.log("close");this.visible = false;// 子组件调用父组件的方法，并传递参数this.$emit("changeVisible", "false");}},

父组件

<book-type-table-add :isVisible="addVisible" @changeVisible="addVisibleMethod"></book-type-table-add>

注意我们添加了一个changeVisible方法

addVisibleMethod(data) {if (data==='false') {this.addVisible = false;} else{this.addVisible = true;}}

addVisibleMethod就是子组件调用的方法。

效果

好文推荐

通俗易懂JVM
为什么Spring中的IOC(控制反转)能够降低耦合性（解耦）？
效率翻倍，这些idea的逆天功能你知道吗？

VUE|利用父子组件制作弹出框相关推荐

vue框架elemnet-ui中Popover弹出框的使用
vue框架elemnet-ui中Popover弹出框的使用 ** 一.如何修改内置的el-popover样式(亲测有效) ** 1.在vue页面文件中使用el-popover组件时,在style标签中 ...
无界微前端（wujie）：element-ui 弹框内使用select组件，弹出框位置异常解决方案
element-ui 弹框内使用select组件,弹出框位置异常解决方案只需三步,第一步: 将子应用将 body 设置为 position: relative 第二步: 在子应用的html上设置个 ...
vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果
本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下效果如下图由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v ...
[原]一步一步自己制作弹出框
说到javascript弹出框的制作,将其实现步骤分开,其实很容易. 下面,将拆分页面弹出框的制作步骤. 首先,准备编辑工具(废话),其实,您可以使用notepad..嘿嘿. 弹出框的组成结构: ...
Vue+ElemtUI中对el-dialog弹出框宽度调整方法
最终我在el-dialog增加了一个customClass 代码如下: <el-dialogtitle="历次服务信息":vis ...
使用popwindow制作弹出框与获得焦点弹出软键盘
如果是声明一各类 public class VideoFilterDialog extends PopupWindow 那么在构造方法中添加: conentView = inflater.inflat ...
element-ui组件Popover 弹出框，el-popover样式、定位以及二次确认弹出框自动关闭问题
先说定位问题如果往里边动态添加内容,定位偏移下面是解决办法: 绑定ref,最关键的是有这行代码 :popper-options="{ boundariesElement: 'viewpo ...
android制作弹出框样式,Android Dialog 弹出框自定义样式
可以去除系统的Dialog的黑边,而且Dialog的样式和布局完全一样可以是不规则图形这个功能不是太难 ,不多说直接上代码先是根据系统的Theme创建一个自己的Theme 在R.styles.x ...
HTML+CSS实现带按钮的弹出框
带按钮的弹出框 HTML部分 CSS样式 JS部分效果图补充知识:关于rgba属性 HTML部分 <button id="showPopup" onclick=" ...

VUE|利用父子组件制作弹出框

文章目录

点击显示弹框

父组件

子组件

点击关闭弹框

子组件

父组件

效果

好文推荐

VUE|利用父子组件制作弹出框相关推荐

最新文章

热门文章