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

博客主页: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就是子组件调用的方法。

效果

---

好文推荐

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