Props, $emit

Component hierarchy Parent component: index.vue Child component: 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>
Copy the code

Second, $refs

The parent and child components have the same relationship

<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>
Copy the code