博客主页:JavaProfessional
一个专注于Java的博主，致力于使用通俗易懂的语句讲解内容，期待您的关注！
文章目录
点击显示弹框父组件子组件点击关闭弹框子组件父组件效果好文推荐点击显示弹框
显示弹框需要父组件有一个控制显隐的变量，并且通过传递给子组件的控制显隐的变量。
父组件
添加一个按钮
<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就是子组件调用的方法。
