关于Dialog 对话框,父子组件传值问题当传入innerVisible控制子组件的显示属性时父组件点击查看父组件子组件

当传入innerVisible控制子组件的显示属性时

父组件

点击查看父组件

<template>
  <div>
    <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
    <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
      </div>
    </el-dialog>
    <child :innerVisible="innerVisible" @close="close"></child>
  </div>
</template>

<script>
import child from "./Chider";
export default {
  data() {
    return {
      outerVisible: false,
      innerVisible: false,
    };
  },
  components: {
    child
  },
  methods: {
    close(){
      console.log('关闭')
      this.innerVisible = false;
    },
  },
};
</script>

子组件

敲重点，因为el-dialog :visible.sync会改变父亲那边穿过来的值(innerVisible)，并且在你点击插插的时候也会改变,所以父组件传过来的建议watch监控并用另一个值进行保存,当然el-dialog提供了一个close回调，也可用这种方式去解决问题

点击查看子组件

<template>
  <div>
    <el-dialog width="30%" title="内层 Dialog" :visible.sync="inn" append-to-body :before-close="closeDialog">
      {{inn}}
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inn: false
    };
  },
  props: ["innerVisible"],
  watch: {
    innerVisible(newvalue) {
      this.inn = newvalue;
    },
  },
  methods: {
    closeDialog(done) {
      console.log(this.data)
      // this.innerVisible = false;
      this.$emit("close", true);
      done();
    }
  }
};
</script>

当要传入一个对象，对象中isShow属性控制子组件的线显示关闭

父组件

点击查看父组件

<template>
  <div>
    <el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
    <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClick">打开内层 Dialog</el-button>
      </div>
    </el-dialog>

    <child :data="data" @close="close"></child>
  </div>
</template>
<script>
import child from "./Chider";
export default {
  data() {
    return {
      outerVisible: false,
      data:{
        a:1,
        isShow:false
      }
    };
  },
  components: {
    child
  },
  methods: {
    close(){
      this.$set(this.data,'isShow',false);
    },
    handleClick(){
      this.$set(this.data,'isShow',true);
    }
  },
};
</script>

子组件

点击查看子组件

<template>
  <div>
    <el-dialog width="30%" title="内层 Dialog" :visible.sync="data.isShow" append-to-body :before-close="closeDialog">
      {{data.a}}
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    closeDialog(done) {
      this.$emit("close", true);
      done();
    }
  }
};
</script>