When the innerVisible controls the display property of the child component

The parent component

Click to see the parent component 
<template>
  <div>
    <el-button type="text" @click="outerVisible = true"<el-dialog title= < el-button title="Outer Dialog" :visible.sync="outerVisible">
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false"</el-button> <el-buttontype="primary" @click="innerVisible = true"</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('off')
      this.innerVisible = false; ,}}}; </script>Copy the code

Child components

Click on the key, because el-Dialog :visible. Sync changes the innerVisible value of the parent side, It also changes when you click insert, so the parent component’s suggestion watch monitors and saves it with another value. Of course, el-Dialog provides a close callback, which can also be used to solve the problem

Click to see the child components 
<template>
  <div>
    <el-dialog width="30%" title="The inner 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(a); }}}; </script>Copy the code

When an object is passed in, the isShow property in the object controls the line display of the child component to be turned off

The parent component

Click to see the parent component 
<template>
  <div>
    <el-button type="text" @click="outerVisible = true"<el-dialog title= < el-button title="Outer Dialog" :visible.sync="outerVisible">
      <div slot="footer" class="dialog-footer">
        <el-button @click="outerVisible = false"</el-button> <el-buttontype="primary" @click="handleClick"> Open inner 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>Copy the code

Child components

Click to see the child components 
<template>
  <div>
    <el-dialog width="30%" title="The inner 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(a); }}}; </script>Copy the code