当前位置：首页 > article >正文

【VUE点击父组件按钮，跳转到子组件】

article 2024/10/26 10:45:39

要实现在Vue中，父组件通过点击按钮进入子组件的 <el-dialog> 弹窗，并在弹窗中嵌套 <el-table> 表格，可以按照以下步骤进行编写代码：

在父组件中，定义一个数据属性用于控制子组件弹窗的显示与隐藏。

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

在父组件的模板中，使用 <el-button> 按钮，并通过点击事件触发方法来打开弹窗。

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

创建子组件 ChildComponent，并在子组件中定义弹窗和表格的内容。

<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>

使用子组件时，通过 props 属性将父组件的 showDialog 数据传递给子组件，并在子组件中根据该属性值控制弹窗的显示与隐藏。通过自定义事件 close-dialog 将子组件中关闭弹窗的方法传递给父组件，在父组件中接收该事件并更新 showDialog 数据。

这样，当在父组件中点击按钮时，子组件的弹窗会显示出来，并在弹窗中展示表格内容。点击子组件中的关闭按钮或其他关闭逻辑时，弹窗会关闭。同时，确保 tableData 变量已经定义并包含正确的表格数据。

可能出现的问题：

如果你点击按钮后看到弹窗显示了，但需要再次点击一下才能看到弹窗内容变亮，这可能是由于 <el-dialog> 组件的 visible.sync 属性的问题。

在 <el-dialog> 组件中，使用 .sync 修饰符可以实现双向绑定，但在某些情况下，可能会导致绑定失效，即更新 visible 属性时无法立即反映在弹窗上。

解决方法：

解决这个问题的方法是，使用一个额外的变量来控制弹窗的显示与隐藏，并在需要更新弹窗状态时手动同步这个变量。

以下是修改后的代码示例：

<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>