<template>
  <div class="app-container">
    <el-button @click="addOrUpdateVisible =! addOrUpdateVisible"
      >按钮</el-button
    >

    <!-- 新增编辑弹框子组件 -->
    <add-or-update
      :addOrUpdateVisible="addOrUpdateVisible"
      @changeShow="showAddOrUpdate"
      ref="addOrUpdateRef"
    ></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./edit.vue";
export default {
  name: "plans",
  data() {
    return {
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
    };
  },
  // 使用子组件
  components: {
    AddOrUpdate,
  },
  methods: {
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data) {
      if (data === "false") {
        this.addOrUpdateVisible = false;
      } else {
        this.addOrUpdateVisible = true;
      }
    },
  },
};
</script>
