一、props、$emit

组件层级关系 父组件：index.vue 子组件：edit.vue

index.vue

<template>
  <div>
    <button @click="openDialog()"></button>
    <edit :show="isShow" @close="closeDialog()"></edit>
  </div>
</template>
<script>
import Edit from './edit'
  export default{
    data() {
      return {
        isShow : false
      }
    },
    components: {
      Edit
    },
    methods:{
      openDialog() {
        this.isShow = true 
      },
      closeDialog() {
        this.isShow = false
      }
    }
  }
</script>

edit.vue
<template>
  <el-dialog
    :visible.sync="isShow"
    :beforeClose="close"
  >
    <button @click="close()"></button>
  </el-dialog>
</template>
<script>
  export default {
    name: 'Edit',   
    prop:{
      {
        show: {
          type: Boolean        
        }
      }
    },
    data() {
      return {
        isShow : this.show        
      }
    },
    methods:{
      close() {
        this.$emit('close');
      }
    }
  }
</script>

二、$refs

父子组件关系如一

<template>
  <div>
    <button @click="open()"></button>
    <edit ref="openDialog"></edit>
  </div>
</template>
<script>
   export default {
     methods:{
       open() {
         this.$refs.openDialog.open();
       }
     }
   }
</script>

<template>
   <el-dialog
    :visible.sync="isShow"
    :beforeClose="close"
  >
    <button @click="close()"></button>
  </el-dialog>
</template>
<script>
  export default{
    data() {
      return {
        isShow: false
      }
    }, 
    methods: {
      open() {
        this.isShow = true        
      },
      close() {
        this.isShow = false
      }
    }
  }
</script>