首页 > 其他分享 >ssts-hospital-web-master项目实战记录九：父组件App.vue给子组件main-page*.vue传值terminal、terminalObject

ssts-hospital-web-master项目实战记录九：父组件App.vue给子组件main-page*.vue传值terminal、terminalObject

时间：2024-02-23 10:23:26浏览次数：22  
标签：web vue terminalObject value 组件 terminalIp 传值

记录时间：2024-02-23

一、App.vue

详见：App.vue组件实现 

【使用“文心一言”提取组件传值逻辑说明和代码】

在 Vue 3 中，组件传值通常涉及到 props、emits、slots 和组件的引用。在提供的代码中，主要关注点是动态组件的渲染和通过 props 传递数据。下面是对组件传值逻辑的说明和代码提取：

组件传值逻辑说明

  1. 动态组件渲染：使用 <component :is="currentComponent" /> 来动态渲染组件。currentComponent 是一个计算属性，它根据 mainpage.value 的值返回不同的组件对象。

  2. 数据传递：动态组件通过 props 接收数据。在这个例子中，terminalIp 和 terminalObject 作为 props 被传递给动态组件。

  3. 异步数据获取：在组件挂载时（onMounted 钩子），调用 GetTerminalConfig 函数异步获取终端配置。这个函数从后端 API 获取 IP 地址和终端信息，并更新响应式引用 terminalIp 和 terminalObject。

  4. 错误处理和重试机制：如果数据获取失败，会设置一个定时器每分钟重试一次。如果成功获取数据，则清除定时器。

  5. 组件注册：在 defineComponent 中注册了 MainPage1、MainPage2 和 MainPage3 组件，这样它们就可以在模板中使用。

提取的代码（仅包含组件传值逻辑）

vue复制代码
  <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

<script setup lang="ts"> import { defineProps } from 'vue' import Master from '@/views/master/master-basic.vue' import DeviceControl from '@/views/device-control/ezware-control.vue' import DataDict from '@/views/data-dict/data-dict.vue' import Monitor from '@/views/monitor/monitor.vue' import Camera1 from '@/views/camera/camera1.vue' import Camera2 from '@/views/camera/camera2.vue'
const { terminalIp, terminalObject } = defineProps({   terminalIp: {     type: String,     required: true   },   terminalObject: {     type: Object,     required: true   } })
const components = [Master, DeviceControl, DataDict, Monitor, Camera1, Camera2]
// 由于在 <script setup> 中，组件不需要导出，因此不需要 defineComponent </script>
<template>   <div>     <title>主页1</title>     <!-- 使用 v-for 渲染组件列表 -->     <component       v-for="(component, index) in components"       :key="index"       :is="component"     />     <!-- 显示 terminalIp -->     <p>Terminal IP: {{ terminalIp }}</p>     <hr />     <!-- 使用 p元素 和 v-for 遍历 terminalObject 的属性并为每个属性创建一个新的行 -->     <p v-for="(value, key) in terminalObject" :key="key">       {{ key }}: {{ value }}     </p>   </div> </template>
<style scoped></style>

【使用“文心一言”提取组件传值逻辑说明和代码】

在提供的 Vue 3 <script setup> 代码中，组件传值逻辑主要涉及父组件向子组件传递 props。这里，<script setup> 语法是 Vue 3 中的一个新特性，允许你使用更简洁的方式来编写组件逻辑。下面是组件传值逻辑的说明和代码提取：

组件传值逻辑说明

  1. 定义 Props：使用 defineProps 函数来定义组件接受的 props。在这个例子中，组件接收两个 props：terminalIp（一个字符串）和 terminalObject（一个对象）。这两个 props 都是必需的。

  2. 组件列表：在 components 数组中，列出了所有要在这个模板中动态渲染的组件。

  3. 动态组件渲染：使用 <component :is="..."> 语法来动态渲染组件列表中的组件。:is="component" 表示要渲染的组件是 components 数组中的当前项。

  4. 传递 Props 到动态组件：虽然在这个例子中没有直接显示传递 props 到动态组件，但通常情况下，如果动态组件需要 props，你可以通过类似 :propName="propValue" 的语法来传递。

  5. 在模板中使用 Props：在模板中，terminalIp 和 terminalObject 被用来显示终端的 IP 地址和对象的属性。

提取的代码（仅包含组件传值逻辑）

vue复制代码
  <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，你需要添加相应的属性绑定语法到动态组件标签上。

翻译

搜索

复制

<iframe></iframe>

在 Vue 3 中，组件传值通常涉及到 props、emits、slots 和组件的引用。在提供的代码中，主要关注点是动态组件的渲染和通过 props 传递数据。下面是对组件传值逻辑的说明和代码提取：

组件传值逻辑说明

  1. 动态组件渲染：使用 <component :is="currentComponent" /> 来动态渲染组件。currentComponent 是一个计算属性，它根据 mainpage.value 的值返回不同的组件对象。

  2. 数据传递：动态组件通过 props 接收数据。在这个例子中，terminalIp 和 terminalObject 作为 props 被传递给动态组件。

  3. 异步数据获取：在组件挂载时（onMounted 钩子），调用 GetTerminalConfig 函数异步获取终端配置。这个函数从后端 API 获取 IP 地址和终端信息，并更新响应式引用 terminalIp 和 terminalObject。

  4. 错误处理和重试机制：如果数据获取失败，会设置一个定时器每分钟重试一次。如果成功获取数据，则清除定时器。

  5. 组件注册：在 defineComponent 中注册了 MainPage1、MainPage2 和 MainPage3 组件，这样它们就可以在模板中使用。

提取的代码（仅包含组件传值逻辑）

vue复制代码
  <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 调用符合您的应用程序的实际需求和后端服务的实现细节。

标签：web,vue,terminalObject,value,组件,terminalIp,传值
From： https://www.cnblogs.com/lizhigang/p/18028911

相关文章

  • ssts-hospital-web-master项目实战记录八：App.vue组件实现
    记录时间：2024-02-23App.vue<scriptsetuplang="ts">import{defineComponent,ref,computed,onMounted,onUnmounted}from'vue'importMainPage1from'@/views/main-page/main-page1.vue'importMainPage2from'@/views......
  • ssts-hospital-web-master项目实战记录七：项目迁移-主页及其组成
    记录时间：2024-02-221.主页及其组成（1）index.html->App.vue（2）MainPage*.html->views/main-page/main-page*.vueMainPage1.html->views/main-page/main-page1.vueMainPage2.html->views/main-page/main-page2.vueMainPage3.html->views/main-page/main-page3......
  • 简单了解HTTP、Websocket和Netty
    前言伴随着网络的快速发展，网络通讯越来越重要，通讯的快捷、安全、方便影响着用户的体验。本文将探讨这些技术的原理、特点以及在实际应用中的应用场景。1.HTTTP（超文本传输协议）HTTP是一种传输超文本的协议，它是现代互联网通信的基础。其特点包括：简单性：HTTP使用简单的请求-响应模......
  • vue前端引用Jquery完成复选框多选
    vue2前端引用Jquery完成复选框多选通常我们使用element-ui中el-table的多选模板完成列表的多选，但是有时需要把表格进行拆分，此时仅凭element-ui中的控件可能无法实现拆分后的多选。由于vue是JavaScript的前端框架，所以我考虑使用js来实现。jQuery作为JavaScript的补充和扩展，可以更......
  • Web应用_6. Vue3
    title:(在线学习平台)link:(https://www.acwing.com/)cover:(https://cdn.acwing.com/media/activity/surface/log.png)Vue官网1配置环境1.1终端Linux和Mac上可以用自带的终端。Windows上推荐用powershell或者cmd。GitBash有些指令不兼容。1.2安装Nodejs安装地址1......
  • Vue学习笔记11--事件
    示例一：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Vue事件的基本使用</tit......
  • Vue中的$nextTick有什么作用？
    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助一、NextTick是什么官方对其的定义在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM什么意思呢？我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vu......
  • C# 采用HttpWebRequest 、WebClient和HttpClient下载https的文件异常问题
    今天有个客户反应，程序下载文件失败，无法正常使用。远程客户电脑后，查看错误日志，都是提示https:****************************.dll等一系列文件的下载错误提示提示基础连接已经关闭:发送时发生错误。在网上找了很多方案都没有能解决，大多都是https链接时增加指定协议，很遗憾未能解......
  • vue3+elment-plus项目，el-diglog的按钮，内部是el-form的子组件，那么保存时，如何触发子组件
    问题：el-diglog的按钮，如何触发内部的form表单提交el-dialog是父组件，cengji是子组件代码如下：<el-dialogv-model="dialogVisible"title="层级结构管理"width="1000"><cengji:tableId="tableId"/><template#footer>......
  • vue2项目 热更新慢解决方案
    问题1构建速度慢问题2每次保存文件，热更新卡94%AssetOptimization这一步上停顿十几秒解决方案一：npmihtml-webpack-plugin-for-multihtml--save-dev文件build/webpack.dev.conf.jsconstHtmlWebpackPlugin=require('html-webpack-plugin')替换为constHtml......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99