通过弹窗组件，谈父子组件传参

通常在构建页面时会将弹窗封装为一个组件方便后期维护，下面我浅谈一下弹窗组件开关标识传递的几种方法。

(1).父传子，子传父将弹窗标识flag传递；

        父组件：

<template>
  <div class="father">
    <sonDialog :dialogFlag="dialogFlag" @closeDialog="closeDialog"></sonDialog>
  </div>
</template>
<script>
import sonDialog from './sonDialog.vue'
export default {
  data() {
    return {
        dialogFlag:false
    }
  },
  methods:{
    closeDialog(){
      this.dialogFlag= false
    },
  }
}
</script>

        子组件：

<template>
  <el-dialog title="提示" :visible.sync="dialogFlag">
    <span>
        注意：props接受父组件的dialogFlag，通过$emit传递closeDialog方法给父组件关闭弹窗
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary">确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  props:["dialogFlag"],
  methods:{
    closeDialog(){
      this.$emit("closeDialog", false);
    }
  }
};
</script>

<style>
</style>

(2).将弹窗开关的方法都定义在子组件中，在需要打开弹窗时，使用ref属性直接在父组件中调用子组件的方法：

        父组件

<template>
  <div class="father">
    <el-button type="primary" @click="openDialog"> 打开弹窗 </el-button
    <sonDialog ref="child""></sonDialog>
  </div>
</template>
<script>
import sonDialog from './sonDialog.vue'
export default {
  methods:{
    openDialog(){
      this.$refs.child.openDialog();
    },
  }
}
</script>

        子组件

<template>
  <el-dialog title="提示" :visible.sync="dialogFlag">
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary">确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data(){
     return{
        dialogFlag:false
    }
  },
  methods:{
    openDialog(){
      this.dialogFlag = true;
    },
    closeDialog(){
      this.dialogFlag = false;
    }
  }
};
</script>

<style>
</style>

(3).将弹窗标识flag定义在一个复杂数据类型对象中dialogFlag{flag:false}传递给子组件，直接在子组件中操作标识控制弹窗的显示隐藏:

        父组件

<template>
  <div class="father">
    <sonDialog :dialogFlag="dialogFlag"></sonDialog>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="openDialog">确 定</el-button>
    </span>
  </div>
</template>
<script>
import sonDialog from './sonDialog.vue'
export default {
  data() {
    return {
        dialogFlag:{flag:false}
    }
  },
  methods{        
    openDialog(){
        this.dialog.flag = true;
    }
  }
}
</script>

        子组件

<template>
  <el-dialog
    :visible.sync="dialogFlag.flag"
  >
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary">确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  props:["dialogFlag"],
  methods:{
    cancel(){
      this.dialogFlag.flag = false
    },
  }
};
</script>

<style>
</style>