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

点击显示弹框

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

父组件

添加一个按钮

<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就是子组件调用的方法。

效果


好文推荐

经验分享 程序员 微信小程序 职场和发展