ssts-hospital-web-master项目实战记录九：父组件App.vue给子组件main-page*.vue传值
记录时间：2024-02-23
一、App.vue
详见：App.vue组件实现
【使用“文心一言”提取组件传值逻辑说明和代码】
在 Vue 3 中，组件传值通常涉及到 props、emits、slots 和组件的引用。在提供的代码中，主要关注点是动态组件的渲染和通过 props 传递数据。下面是对组件传值逻辑的说明和代码提取：
组件传值逻辑说明
-
动态组件渲染：使用
<component :is="currentComponent" />来动态渲染组件。currentComponent是一个计算属性，它根据mainpage.value的值返回不同的组件对象。 -
数据传递：动态组件通过 props 接收数据。在这个例子中，
terminalIp和terminalObject作为 props 被传递给动态组件。 -
异步数据获取：在组件挂载时（
onMounted钩子），调用GetTerminalConfig函数异步获取终端配置。这个函数从后端 API 获取 IP 地址和终端信息，并更新响应式引用terminalIp和terminalObject。 -
错误处理和重试机制：如果数据获取失败，会设置一个定时器每分钟重试一次。如果成功获取数据，则清除定时器。
-
组件注册：在
defineComponent中注册了MainPage1、MainPage2和MainPage3组件，这样它们就可以在模板中使用。
提取的代码（仅包含组件传值逻辑）
| <script setup lang="ts"> |
| import { ref, computed, onMounted, onUnmounted } from 'vue'; |
| import MainPage1 from '@/views/main-page/main-page1.vue'; |
| import MainPage2 from '@/views/main-page/main-page2.vue'; |
| import MainPage3 from '@/views/main-page/main-page3.vue'; |
| // 定义响应式变量 |
| const errormsg = ref(''); |
| const mainpage = ref('MainPage1'); // 直接存储组件对象 |
| const terminalIp = ref(''); |
| const terminalObject = ref(null); |
| // 获取终端配置的函数 |
| async function GetTerminalConfig() { |
| try { |
| // 模拟异步获取 IP 地址和终端信息 |
| terminalIp.value = '192.168.1.1'; |
| terminalObject.value = { MainPageUrl: 'MainPage1.html' }; |
| // 更新 mainpage.value 以切换组件 |
| mainpage.value = terminalObject.value.MainPageUrl; |
| errormsg.value = ''; |
| } catch (error) { |
| errormsg.value = '获取终端配置时发生错误！'; |
| } |
| } |
| // 组件挂载后获取终端配置 |
| onMounted(GetTerminalConfig); |
| // 计算属性，根据 mainpage.value 返回相应的组件 |
| const currentComponent = computed(() => { |
| switch (mainpage.value) { |
| case 'MainPage1.html': |
| return MainPage1; |
| case 'MainPage2.html': |
| return MainPage2; |
| case 'MainPage3.html': |
| return MainPage3; |
| default: |
| return MainPage1; |
| } |
| }); |
| // 导出组件定义，仅包含与组件传值相关的部分 |
| defineComponent({ |
| name: 'App', |
| components: { |
| MainPage1, |
| MainPage2, |
| MainPage3 |
| }, |
| setup() { |
| // 返回需要在模板中使用的响应式变量和函数 |
| return { |
| errormsg, |
| currentComponent, |
| terminalIp, |
| terminalObject |
| }; |
| } |
| }); |
| </script> |
| <template> |
| <div> |
| {{ errormsg }} |
| <component |
| :is="currentComponent" |
| :terminalIp="terminalIp" |
| :terminalObject="terminalObject" |
| /> |
| </div> |
| </template> |
请注意，上述代码已简化并移除了与后端 API 通信的部分，因为实际的 API 调用可能涉及更复杂的逻辑和错误处理。同时，请确保您的后端 API 调用符合您的应用程序的实际需求和后端服务的实现细节。
二、main-page*.vue
main-page1.vue
【使用“文心一言”提取组件传值逻辑说明和代码】
在提供的 Vue 3 <script setup> 代码中，组件传值逻辑主要涉及父组件向子组件传递 props。这里，<script setup> 语法是 Vue 3 中的一个新特性，允许你使用更简洁的方式来编写组件逻辑。下面是组件传值逻辑的说明和代码提取：
组件传值逻辑说明
-
定义 Props：使用
defineProps函数来定义组件接受的 props。在这个例子中，组件接收两个 props：terminalIp（一个字符串）和terminalObject（一个对象）。这两个 props 都是必需的。 -
组件列表：在
components数组中，列出了所有要在这个模板中动态渲染的组件。 -
动态组件渲染：使用
<component :is="...">语法来动态渲染组件列表中的组件。:is="component"表示要渲染的组件是components数组中的当前项。 -
传递 Props 到动态组件：虽然在这个例子中没有直接显示传递 props 到动态组件，但通常情况下，如果动态组件需要 props，你可以通过类似
:propName="propValue"的语法来传递。 -
在模板中使用 Props：在模板中，
terminalIp和terminalObject被用来显示终端的 IP 地址和对象的属性。
提取的代码（仅包含组件传值逻辑）
| <script setup lang="ts"> |
| import { defineProps } from 'vue' |
| // 定义组件接收的 props |
| const { terminalIp, terminalObject } = defineProps({ |
| terminalIp: { |
| type: String, |
| required: true |
| }, |
| terminalObject: { |
| type: Object, |
| required: true |
| } |
| }) |
| </script> |
| <template> |
| <div> |
| <!-- 显示传递进来的 terminalIp --> |
| <p>Terminal IP: {{ terminalIp }}</p> |
| <hr /> |
| <!-- 遍历并显示 terminalObject 的属性 --> |
| <p v-for="(value, key) in terminalObject" :key="key"> |
| {{ key }}: {{ value }} |
| </p> |
| </div> |
| </template> |
| <style scoped></style> |
请注意，提取的代码仅包含与组件传值逻辑相关的部分。动态组件渲染的部分 (<component v-for="...">) 由于在这个例子中并没有实际传递 props 到子组件，所以没有在提取的代码中包含。如果有必要传递 props，你需要添加相应的属性绑定语法到动态组件标签上。
在 Vue 3 中，组件传值通常涉及到 props、emits、slots 和组件的引用。在提供的代码中，主要关注点是动态组件的渲染和通过 props 传递数据。下面是对组件传值逻辑的说明和代码提取：
组件传值逻辑说明
-
动态组件渲染：使用
<component :is="currentComponent" />来动态渲染组件。currentComponent是一个计算属性，它根据mainpage.value的值返回不同的组件对象。 -
数据传递：动态组件通过 props 接收数据。在这个例子中，
terminalIp和terminalObject作为 props 被传递给动态组件。 -
异步数据获取：在组件挂载时（
onMounted钩子），调用GetTerminalConfig函数异步获取终端配置。这个函数从后端 API 获取 IP 地址和终端信息，并更新响应式引用terminalIp和terminalObject。 -
错误处理和重试机制：如果数据获取失败，会设置一个定时器每分钟重试一次。如果成功获取数据，则清除定时器。
-
组件注册：在
defineComponent中注册了MainPage1、MainPage2和MainPage3组件，这样它们就可以在模板中使用。
提取的代码（仅包含组件传值逻辑）
| <script setup lang="ts"> |
| import { ref, computed, onMounted, onUnmounted } from 'vue'; |
| import MainPage1 from '@/views/main-page/main-page1.vue'; |
| import MainPage2 from '@/views/main-page/main-page2.vue'; |
| import MainPage3 from '@/views/main-page/main-page3.vue'; |
| // 定义响应式变量 |
| const errormsg = ref(''); |
| const mainpage = ref('MainPage1'); // 直接存储组件对象 |
| const terminalIp = ref(''); |
| const terminalObject = ref(null); |
| // 获取终端配置的函数 |
| async function GetTerminalConfig() { |
| try { |
| // 模拟异步获取 IP 地址和终端信息 |
| terminalIp.value = '192.168.1.1'; |
| terminalObject.value = { MainPageUrl: 'MainPage1.html' }; |
| // 更新 mainpage.value 以切换组件 |
| mainpage.value = terminalObject.value.MainPageUrl; |
| errormsg.value = ''; |
| } catch (error) { |
| errormsg.value = '获取终端配置时发生错误！'; |
| } |
| } |
| // 组件挂载后获取终端配置 |
| onMounted(GetTerminalConfig); |
| // 计算属性，根据 mainpage.value 返回相应的组件 |
| const currentComponent = computed(() => { |
| switch (mainpage.value) { |
| case 'MainPage1.html': |
| return MainPage1; |
| case 'MainPage2.html': |
| return MainPage2; |
| case 'MainPage3.html': |
| return MainPage3; |
| default: |
| return MainPage1; |
| } |
| }); |
| // 导出组件定义，仅包含与组件传值相关的部分 |
| defineComponent({ |
| name: 'App', |
| components: { |
| MainPage1, |
| MainPage2, |
| MainPage3 |
| }, |
| setup() { |
| // 返回需要在模板中使用的响应式变量和函数 |
| return { |
| errormsg, |
| currentComponent, |
| terminalIp, |
| terminalObject |
| }; |
| } |
| }); |
| </script> |
| <template> |
| <div> |
| {{ errormsg }} |
| <component |
| :is="currentComponent" |
| :terminalIp="terminalIp" |
| :terminalObject="terminalObject" |
| /> |
| </div> |
| </template> |
请注意，上述代码已简化并移除了与后端 API 通信的部分，因为实际的 API 调用可能涉及更复杂的逻辑和错误处理。同时，请确保您的后端 API 调用符合您的应用程序的实际需求和后端服务的实现细节。
