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

博客主页:JavaProfessional
一个专注于Java的博主，致力于使用通俗易懂的语句讲解内容，期待您的关注！

• 点击显示弹框
• • 父组件
  • 子组件
• 点击关闭弹框
• • 子组件
  • 父组件
• 效果
• 好文推荐

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

添加一个按钮

  新增
  

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

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
      }
  },
}

  新增
  

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

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

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

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

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

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

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