vue+elementui el-dialog subcomponent upper right corner close and button close

The upper right corner is closed: :before-close="toggleDialog" is written in the child component, and the closed method is passed to the parent component through $emit in methods.

In the parent component, pass the open parent to the child to the child component. The closing method is written in methods and changes the state of open

//子组件
<template>
  <div class="app-container">
    <el-dialog title="选择收件人" :visible.sync="open" :before-close="toggleDialog" :close-on-click-modal="false" width="1200px" append-to-body>
      //xxx内容
      <div slot="footer" class="dialog-footer">
      //法一：直接在按钮中写点击事件，通过$emit，传给给父组件。
        <el-button @click="$emit('cancel', false)">关 闭</el-button>
      //法二：写点击事件，通过父传子，将open传递过来
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: "",
    props: {
      open: {
        type: Boolean
      },
      cancel: {
        type: Function
      }
    },
    data() {
      return {};
    },
    methods: {
      toggleDialog() {
        this.$emit('toggleDialog')
      },
    }
  };
</script>

//父组件
<template>
  <div>
    <!--选择收件人组件-->
    <select-recipients :open="open" @toggleDialog="cancel" :cancel="cancel"></select-recipients>
  </div>
</template>

<script>
  import SelectRecipients from "@/views/message/email/components/selectRecipients";

  export default {
    name: "",
    components: {SelectRecipients},
    data() {
      return {
        // 是否显示弹出层
        open: false,
      };
    },
    methods: {
      /** 子组件取消按钮 */
      cancel() {
        this.open = false;
      },
    }
  };
</script>