第7章 父子组件通信
父子组件通信概述
在现代前端开发中，尤其是使用 Vue 框架构建复杂用户界面时，组件化开发是一种常见且高效的实践方式。当页面内容较为复杂，如入住详情页面包含基本信息、家属信息、入住配置和签约办理等多个部分时，若将所有代码都写在一个组件中，会导致代码的可读性、可维护性和可复用性变差。因此，通常会将大组件拆分成多个小组件，每个小组件负责特定的功能或展示特定的信息。
在若依框架的入住详情页面开发中，details.vue作为父组件，将内容过多的页面拆分成 4 个单独的组件（对应基本信息、家属信息、入住配置和签约办理），然后在 details.vue中统一引入。这样就涉及到组件之间的通信问题，即父组件与子组件之间如何进行数据的传递和交互，以实现整个页面数据的统一管理和业务流程的正常运行。
父子组件通信是 Vue 组件化开发中的基础且关键的环节，它允许父组件向子组件传递必要的数据，同时子组件也能将自身的状态变化或用户操作等信息反馈给父组件，从而确保各个组件之间能够协同工作，共同完成复杂的业务逻辑。
入门案例
整体设计思路
在入住列表页面 index.vue中，用户点击发起入住申请或者查看按钮，会进入到 details.vue详情页。由于 details.vue中的内容较多，将其拆分成 4 个单独的组件，然后在 details.vue中统一引入，最终实现前端页面的展示。
其中 details.vue是父组件，components目录下的四个组件是子组件。最终四个子组件表单中的数据需要统一收集到父组件中，这就涉及到了组件之间的通信，具体包括父组件引用子组件以及子组件传数据到父组件两个方面。
父组件向子组件传递数据
在 Vue 3 中，父组件向子组件传递数据通常是通过 props来实现的，其定义和使用变得更加简洁。
示例代码
- 父组件（parent.vue）传递数据
<template>
<div>
<!-- 通过 message 属性将数据传递给子组件 ChildComponent -->
<child :message="parentMessage"></child>
</div>
</template>
<script setup>
import child from './child.vue';
// 定义要传递给子组件的数据
const parentMessage = '来自父组件的消息';
</script>
在这个例子中，父组件通过 message属性将 parentMessage数据传递给子组件 ChildComponent。
- 子组件（child.vue）接收数据
<template>
<div>{{ message }}</div>
</template>
<script setup>
// 声明期望接收的 prop
defineProps({
message: String,
});
</script>
子组件通过 defineProps钩子来声明它期望接收的 prop，并且在模板中使用这个 prop来显示从父组件传递过来的数据。
3. 子组件向父组件传递数据
子组件向父组件传递数据通常是通过自定义事件来实现的。
示例代码
- 子组件（child.vue）触发事件
<template>
<!-- 点击按钮触发向父组件发送消息的事件 -->
<button @click="sendMessage">给父组件发消息</button>
</template>
<script setup>
// 获取发射事件的函数
const emit = defineEmits(['message-sent']);
// 定义点击按钮时触发的函数，发射自定义事件并传递消息
function sendMessage() {
emit('message-sent', '来自子组件的消息');
}
</script>
在这个例子中，子组件定义了一个自定义事件 message - sent，并在按钮点击时触发这个事件，同时传递一个消息。
- 父组件（parent.vue）监听事件
<template>
<div>
<!-- 监听子组件触发的 message-sent 事件，并调用 handleMessage 函数处理 -->
<child @message-sent="handleMessage"></child>
</div>
</template>
<script setup>
import child from './child.vue';
// 定义处理子组件传递消息的函数
function handleMessage(message) {
console.log('接收到了子组件的消息:', message);
}
</script>
父组件通过 @message - sent监听子组件触发的事件，并定义了一个处理函数 handleMessage来接收和处理子组件传递过来的消息。
入住详情页面父子组件通信案例
在若依框架的入住详情页面中，details.vue作为父组件，四个子组件（基本信息、家属信息、入住配置和签约办理）作为子组件。父组件需要收集子组件表单中的数据，同样遵循上述 Vue 组件通信的基本原则。
父组件（details.vue）向子组件传递数据
父组件可以将一些公共的数据，如用户的基本信息、入住申请的基本配置等，通过 props传递给各个子组件。例如，将老人的基本信息传递给基本信息子组件，以便子组件进行展示和编辑。
子组件向父组件（details.vue）传递数据
各个子组件在用户输入或操作完成后，将表单数据通过自定义事件传递给父组件。父组件监听这些自定义事件，将接收到的数据统一收集起来，最终实现整个入住详情页面数据的整合和管理。例如，基本信息子组件在用户编辑完老人姓名、身份证号等信息后，通过自定义事件将这些数据传递给 details.vue父组件。
通过这种父子组件通信的方式，若依框架的入住详情页面能够实现各个组件之间的协同工作，提高代码的可维护性和可扩展性，同时也便于后续的功能扩展和业务逻辑调整。