关于VUE点击父组件按钮跳转到子组件的问题及解决方案

data() {
  return {
    showDialog: false, // 控制弹窗显示与隐藏的标志位
  };
},

<template>
  <div>
    <el-button type="primary" @click="showDialog = true">打开弹窗</el-button>
    <child-component :show-dialog="showDialog" @close-dialog="showDialog = false"></child-component>
  </div>
</template>

<template>
  <div>
    <el-dialog :visible.sync="showDialog" @close="closeDialog" title="弹窗标题" width="80%">
      <el-table :data="tableData">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <!-- 其他表格列 -->
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      tableData: [
        // 表格数据
        { name: '张三', age: 20 },
        { name: '李四', age: 25 }
      ],
    };
  },
  methods: {
    closeDialog() {
      this.$emit('close-dialog');
    },
  },
};
</script>

<template>
  <div>
    <el-button type="primary" @click="openDialog">打开弹窗</el-button>
    <child-component :show-dialog="dialogVisible" @close-dialog="closeDialog"></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false, // 控制弹窗显示与隐藏的标志位
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
  },
};
</script>