vue 父子组件通讯案例

1、父组件：

<template>
     <el-button @click="showDialog">显示</el-button>
 
    <div>
      <EquipmentDialog :title="title" :dialogVisible="dialogVisible" @close="close"></EquipmentDialog>
    </div>
  
</template>

<script>

  import EquipmentDialog from '@/components/EquipmentDialog'

  export default {
    name: 'Package',
    data(){
      return {

        title: "测试",
        dialogVisible:false
      }
    },
    components:{
      EquipmentDialog: EquipmentDialog
    },
    methods:{
      showDialog(){
        this.dialogVisible = true;
      },
      close(){
        console.log("关闭--------");
        this.dialogVisible = false;
        console.log('---------',this.dialogVisible)
      }
    }
  }
</script>

 

2、子组件

<template>
    <div>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="80%"
        :before-close="handleClose">
        <div>
         子组件
        </div>

      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'EquipmentDialog',
    props:{
      dialogVisible:{
        type:Boolean,
        default:false
      },
      title:{
        type:String,
        default : ""
      }
    },
    data(){
      return {
        // dialogVisible : false,
        // title:""
      }
    },
    methods:{
      handleClose(){
        // this.dialogVisible = false;
        //调用父组件中的close方法 进行关闭
        this.$emit('close',false);

      }
    }
  }
</script>