在Vue中，实现子组件数据的展示通常涉及到父子组件之间的通信和组件的生命周期钩子。以下将详细解析如何通过点击父组件中的按钮来触发子组件中数据的展示。

父子组件通信基础

在Vue中，父子组件之间的通信主要有以下几种方式：

  1. Props: 父组件向子组件传递数据。
  2. Events: 子组件向父组件发送消息。
  3. Custom Events: 自定义事件，用于跨组件通信。
  4. ** slots**: 插槽，用于内容分发。
  5. Provide / Inject: 实现祖先与后代组件间的数据传递。

在本例中，我们将使用Props和Events来实现点击父组件按钮触发子组件数据展示的功能。

实现步骤

1. 父组件

在父组件中，我们需要定义一个控制子组件显示的数据属性，并通过按钮点击事件来更新这个属性。

<template>
  <div>
    <el-button type="primary" @click="showDialog = true">打开数据展示</el-button>
    <child-component v-if="showDialog" @close="showDialog = false"></child-component>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const showDialog = ref(false);
</script>

2. 子组件

在子组件中，我们需要定义一个模板来展示数据，并处理关闭弹窗的事件。

<template>
  <el-dialog :visible.sync="visible" 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>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const visible = ref(false);
const tableData = ref([
  { name: '张三', age: 18 },
  { name: '李四', age: 22 },
  { name: '王五', age: 20 }
]);

defineExpose({
  closeDialog() {
    visible.value = false;
  }
});
</script>

3. 父组件调用子组件

在父组件中，我们可以通过defineExpose将子组件的方法暴露出来，这样父组件就可以调用子组件的方法。

import { defineExpose } from 'vue';

defineExpose({
  closeDialog() {
    showDialog.value = false;
  }
});

总结

通过以上步骤，我们实现了点击父组件按钮来触发子组件数据展示的功能。这个过程主要依赖于Vue的响应式系统和组件间的通信机制。在实际开发中，可以根据具体需求调整和优化代码。