右上角关闭：:before-close="toggleDialog" 写在子组件中，关闭的方法在methods中通过$emit传递给父组件。

父组件中将open父传子传给子组件。关闭方法写在methods中，并改变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>