大屏使用技巧——如何实现数据分发

当多个组件需共用同一数据源时,为了减少重复请求,需要进行数据分发。那如何实现接一次数据就能让多个组件映射同一数据源中的不同数据字段呢?
file

实现思路

目标组件的静态数据中添加标记字段,数据过滤器内通过 data 参数获取到对应标记,随后根据需求进行逻辑处理。
file

操作流程

接入数据(本教程在数据容器中模拟数据)。
file

在数据容器中添加过滤器,将接口数据格式化,方便后续不同的组件“读取”数据。
file

数据容器在交互中发出回调字段,发出“信号”用于组件接收。

file
提前在【标题组件】静态数据里根据数据类型添加筛选字段。
file

标题组件接收userData回调,根据静态数据的key筛选userData回调的数据,根据key的筛选,做到一个过滤器,多个组件通用,实现数据分发。
file

另一个标题组件同理。
file

如需获得该教程demo,可进入公众号“易知微产品帮助中心”发送消息“数据分发”获取~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/50673.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

加密micropython写的程序为.mpy的方法

2024年7月26日 用虚拟机安装一个Linux,本例为CentOS7的Linux系统。 1.保证Linux能够连接网络。 2.进入root用户,使用下面的命令行安装gcc编译器: yum install gcc 3.安装完成后,查看gcc是否安装成功,用下面的命令…

家政项目小程序的设计

管理员账户功能包括:系统首页,个人中心,用户管理,家政人员管理,家政服务管理,咨询信息管理,咨询服务管理,家政预约管理,留言板管理,系统管理 微信端账号功能…

前端开发知识-vue

大括号里边放键值对,即是一个对象。 一、vue可以简化前端javascript的操作。 主要特点是可以实现视图、数据的双向绑定。 使用vue主要分为三个步骤: 1.javascript中引入vue.js 可以src中可以是vue的网址,也可以是本地下载。 2.在javasc…

FastAPI(七十九)实战开发《在线课程学习系统》接口开发-- 加入课程和退出课程

源码见:"fastapi_study_road-learning_system_online_courses: fastapi框架实战之--在线课程学习系统" 加入课程 我们先看下加入课程 1.是否登录 2.课程是否存在 3.是否已经存在 4.添加 首先实现逻辑 def get_student_course(db: Session, course: int…

C++——QT:保姆级教程,从下载到安装到用QT写出第一个程序

登录官网,在官网选择合适的qt版本进行下载 这里选择5.12.9版本 点击exe文件下载,因为服务器在国外,国内不支持,所以可以从我的网盘下载 链接: https://pan.baidu.com/s/1XMILFS1uHTenH3mH_VlPLw 提取码: 1567 --来自百度网盘超级…

本地部署Graphhopper路径规划服务(graphhopper.sh启动版)

文章目录 文章参考源码获取一、配置Java环境变量二、配置Maven环境变量三、构建graphhopper步骤1. 下载数据2. 配置graphhopper配置文件config-example.yml3. 在项目中启动命令行执行./graphhopper.sh build3.1|、遇到的问题3.1.1、pom.xml中front-maven-plugin-无法下载npm6.1…

土耳其云手机提升TikTok电商效率

在数字化飞速发展的今天,TikTok不仅是一个社交平台,更是一个巨大的电商市场。随着TikTok电商功能在全球范围内的扩展,土耳其的商家和内容创作者正面临着前所未有的机遇。本文将详细介绍土耳其云手机怎样帮助商家抓住机遇,实现业务…

项目都做完了,领导要求国际化????--JAVA后端篇

springboot项目国际化相信各位小伙伴都会,很简单,但是怎么项目都做完了,领导却要求国际化文件就很头疼了 国际化的SpringBoot代码: 第一步:创建工具类 /*** 获取i18n资源文件** author bims*/ public class Message…

MATLAB怎么实现多条曲线共用一个图例

y1 sin(x); y2 3*sin(x); y3 cos(x); y4 3*cos(x); 例子:如果我们有4条曲线,分布是cos类和sin类,我们的图例就想区分是cos类还是sin类。 第一步(关键步骤) 我们要把我们所需要的类别曲线先画一遍, …

《Programming from the Ground Up》阅读笔记:p75-p87

《Programming from the Ground Up》学习第4天,p75-p87总结,总计13页。 一、技术总结 1.persistent data p75, Data which is stored in files is called persistent data, because it persists in files that remain on disk even when the program …

用 apifox cli 命令行运行本地接口出现TypeError:Invalid IP address: undefined

用 apifox cli 命令行运行本地接口出现TypeError:Invalid IP address: undefined,客户端运行是通过的但命令行运行会报错 修改端口也是一样报错,地址修改为127.0.0.1会报错connect ECONNREFUSED 127.0.0.1:8080 解决方法:不用localhost&…

智能合约在能源行业中的应用:促进可再生能源的发展与利用

随着全球能源需求的增长和环境保护意识的提升,可再生能源作为替代传统能源的重要选择,正逐步成为能源供应的主流。本文将探讨智能合约在能源行业中的应用,特别是如何通过智能合约促进可再生能源的发展与利用。 可再生能源的重要性与挑战 可再…

react中使用forwardRef获取子组件中的节点以及子组件的方法(useImperativeHandle的使用)

1.forwardRef的使用 import { forwardRef, useRef } from "react"const Son forwardRef((props, ref)> {return (<input type"text" ref{ref} id"kannoId"/>) })function ForwardRef() {const sonRef useRef(null)const showRef ()…

Javascript前端面试基础5【每日更10】

let与var的区别 let命令不存在变量提升&#xff0c;如果在let前使用&#xff0c;会导致报错&#xff08;var存在变量提升&#xff09;如果块区中存在let和const命令&#xff0c;就会形成封闭作用域不允许重复声明&#xff0c;因此&#xff0c;不能在函数内部重新声明参数 m…

基于Qt的视频剪辑

在Qt中进行视频剪辑可以通过多种方式实现&#xff0c;但通常需要使用一些额外的库来处理视频数据。以下是一些常见的方法和步骤&#xff1a; 使用FFmpeg FFmpeg是一个非常强大的多媒体框架&#xff0c;可以用来处理视频和音频数据。你可以使用FFmpeg的命令行工具或者其库来实现…

YOLOv8魔改核心-模型yaml文件解析与网络结构打印

前言 本篇文章主要用于记录学习YOLOv8中网络模型yaml文件&#xff0c;我们一般只知道如何去训练模型&#xff0c;和配置yaml文件&#xff0c;但是对于yaml文件是如何输入到模型里&#xff0c;模型如何将yaml文件解析出来的确是不知道的&#xff0c;下面我们从yaml文件来讲解&a…

python+vue3+onlyoffice在线文档系统实战20240726笔记,左侧菜单实现和最近文档基本实现

解决右侧高度过高的问题 解决方案&#xff1a;去掉右侧顶部和底部。 实现左侧菜单 最近文档&#xff0c;纯粹文档 我的文档&#xff0c;既包括文件夹也包括文件 共享文档&#xff0c;别人分享给我的 基本实现代码&#xff1a; 渲染效果&#xff1a; 简单优化 设置默认菜…

RT-Thread Studio搭建 Renesa Version Board开发环境

目录 概述 1 认识Version Board 1.1 Vision-Board简介 1.2 Vision-Board的资源 2 搭建Version Board开发环境 2.1 RT Thread Studio 2.2 安装SDK 3 开发环境验证 3.1 创建项目 3.2 编译和下载 概述 本文主要介绍使用RT-Thread Studio搭建 Renesa Version Board开发环…

c语言第四天笔记

关于 混合操作&#xff0c;不同计算结果推理 第一种编译结果&#xff1a; int i 5; int sum (i) (i) 6 7 13 第二种编译结果&#xff1a; int i 5; int sum (i) (i) 6 7 7 7 前面的7是因为后面i的变化被影响后&#xff0c;重新赋值 14 第一种编译结果&#xff…

Html+Css网页开发之动态登录页面(默认Chrome)

>>效果展示图<< 一、需求分析与设计要求 实现了一个动态背景图案的效果&#xff0c;包括一个白色的容器&#xff0c;内部有一个标题、一个输入框、一个按钮和一些文本。 背景是一个渐变色的线性渐变&#xff0c;而在容器的周围&#xff0c;有一些随机的方形和圆形图…