当前位置：首页 > news >正文

【Vue.js】组件数据通信：基于Props 实现父组件→子组件传递数据（最基础案例）

news 来源：原创 2025/5/24 20:55:40

概览

前言
父子通信流程
- - 关键技术点
  - 关键规则
实战
- 1. 在父组件中注册子组件
- 2. 子组件接收父组件传入的数据
- 补充与总结

前言

在 Vue 3 中，父组件向子组件传递数据是通过props实现的。父组件在子组件的标签上绑定数据，子组件通过定义props接收这些数据。这种方式使得数据单向流动，确保组件之间的数据传递清晰且易于管理。接下来，我们将详细探讨如何通过props实现父组件到子组件的数据传递。

本博客文章内容均可以在 Vue演练场中直接使用.

强烈建议和我一样的初学Vue者在演练场中运行代码。

父子通信流程

父子组件数据传递流程如图：

关键技术点

数据绑定：父组件用 v-bind:（或 : 缩写）传递javaScript 的变量/函数/基本类型数据；
Prop 声明：子组件通过 defineProps 定义接收规范
单向数据流：子组件不能直接修改 props（需通过 emit 通知父组件修改）

关键规则

数据入口：父组件通过 props 传递数据（唯一入口）
通信出口：子组件通过 emit 触发事件（唯一出口）
数据所有权：谁持有数据，谁负责修改（父组件管理状态）
性能优化：避免在子组件中解构 props（用 toRefs 保持响应性）

实战

强烈建议以下代码直接在Vue.js 的演练平台中运行
在这里插入图片描述

父组件直接在演练台现有的App.vue中编写即可，子组件直接新建一个Child.vue，在App.vue中直接使用import Child from './Child.vue'即可实现注册，非常方便，下面同。

接下来简单介绍父亲传值给子组件的基本步骤：

1. 在父组件中注册子组件

1.父组件引入子组件页面。并在模板中使用。

在父组件页面index.vue 先把子组件，例如名为Child.vue的页面注册，并在index.vue中，使用子组件 ,也就是说，在父组件index.vue模板中，有子组件标签，例如 <Chlid>等等。

2. 在父组件引入的子组件标签中，通过属性绑定，传入父组件想要给子组件的数据
在下面样例中，父组件想要传递给子组件的值，都是通过在引入的子组件标签中，直接把

父组件通过属性 send-car 来传递index.vue中的变量 car ，给子组件；
父组件通过属性 gift-list 来传递index.vue中的响应式数组gifts 给子组件。

index.vue (父页面)

<template>
<div><h3>父组件</h3><h5>父亲的车: {{car}}</h5><h5>父亲准备送给孩子的礼物</h5><ul><li v-for="(gift,index) in gifts" :key="index">{{gift}}</li></ul><Child :send-car="car" :gift-list="gifts"></Child>
</div>
</template>
<script setup>
import { ref,reactive } from 'vue'
// 引入子组件
import Child from './Child.vue'
// 父组件本身的变量
const car= ref('奔驰S450')
const gifts=reactive(['500元红包','乒乓球','帽子']);
</script>

解释

在上面的代码中：:send-car 的作用是将父组件中定义的响应式变量 car 数据绑定到子组件的 sendCar 属性上。使用 : 表示这是一个动态绑定，Vue 会将 car 的值传递给子组件。
在 :send-car="car" ，等号左边的属性，是子组件若要接收时，需要声明的变量，子组件需要通过 defineProps 定义 sendCar 属性接收（因为 Vue 会自动转换 kebab-case 为 camelCase);等号右边的值，正是父组件index.vue中声明的变量。

2. 子组件接收父组件传入的数据

子组件通过difineProps 接收父组件传过来的数据

子组件Child.vue, 通过定义defineProps 数组，并且在defineProps 属性中声明父组件传过来的
数据，子组件直接获取即可。注意，父组件的属性绑定中，声明的send-car ，子组件需要转为camelCase才能接收。
如果你想直接获取父组件传过来的值，拿来直接渲染到子组件模板中（即不需要其余逻辑），直接在模板中使用插值语法（也就是 {{}} ）拿到。
如果你需要存储父组件传过来的数值，并进行后期的逻辑操作，那么你就需要从 Vue 的库中导入一个名为 defineProps 的函数

Child.vue

【情况1】子组件直接拿到父组件的数据，渲染到页面上，不做任何处理

<template><div><h3>子组件</h3><h6>儿子收到父亲的汽车:{{sendCar}}</h6><h5>儿子收到父亲的礼物</h5><ul><li v-for="(gift,index) in giftList" :key="index">{{gift}}</li></ul></div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
// 只想把父组件的值，拿来就用，不做其他逻辑处理
defineProps(['sendCar','giftList'])
</script>

【情况2】子组件存储父组件传过来的值，进行后续的逻辑校验与判断

<template>
<!--.... 和上面一样-->
</template>
<script setup lang="ts">
// 引入 defineProps
import { defineProps } from 'vue';
import {ref} from 'vue'
// defineProps(['sendCar','giftList'])
// 定义 props
const props = defineProps({sendCar: String,giftList: Array
});
const gg=ref(props.giftList)
console.log(gg.value)
</script>

【情况3：对传输数据校验】

如果你还想对父组件传过来的值进行校验或者赋默认值等操作，可以扩充props内容

<!-- 子组件 Child.vue -->
<script setup>
const props = defineProps({title: String,        // 类型校验dataList: {           // 复杂校验type: Array,		// 传递的数据类型是数组required: true,		//default: () => []}
});
console.log(props.title); // 使用数据
</script>

两种写法的说明

// 数组写法（仅声明属性名，无类型校验）
defineProps(['sendCar', 'giftList'])// 对象写法（可类型校验+默认值）
defineProps({sendCar: { type: String, required: true },giftList: { type: Array, default: () => [] }
})

补充与总结

在父组件中，根据传递的数据类型解析方式，来确定是否使用 : 修饰符表示：

绑定方式	示例	传递的数据类型
带 : 动态绑定	:prop=“value”	可以是任意类型（变量、对象、数组、函数等）
不带：静态属性	prop=“val”	只能是字面意义上的字符串（即使内容是 “true” 或 “[1,2,3]” 也会被当作字符串）

只要用 ： 绑定，我们可以传递：

基本类型：String、Number、Boolean、null、undefined
引用类型：Array、Object、Function、Date 等
响应式数据：ref、reactive 包装的对象
函数，函数传递必须强制使用 :，例如 <Child :onClick="handleClick" />

注意：即使传递的是字面量（非变量），也需要 : 来正确解析类型：例如

<!-- 需要 : 才能传递正确的类型 -->
<Child :count="42" :disabled="false" />
<!-- 否则会变成字符串 -->
<Child count="42" disabled="false" /> <!-- 实际传递的是 "42" 和 "false" -->

注意：
如果父组件传递给子组件的是Object 类型的数据，例如对象数组，那么直接打印只会显示[Object]
在 Vue 3 中，props 被包装成 Proxy 对象，控制台默认不会自动展开其内部数据，而是显示 Object 或 Proxy。用 JSON.stringify() 查看原始数据。

总结：父组件需要声明为小写，中间用 - 隔开的形式，子组件需要在defineProps 中转成camelCase才能接收成功。

【Vue.js】组件数据通信：基于Props 实现父组件→子组件传递数据（最基础案例）

概览前言父子通信流程关键技术点关键规则实战1. 在父组件中注册子组件2. 子组件接收父组件传入的数据补充与总结前言在 Vue 3 中，父组件向子组件传递数据是通过props实现的。父组件在子组件的标签上绑定数据，子组件通过定义props接收这些数据。这种…...

编程日记 2025/5/24 20:55:40

信创时代技术栈选择与前景分析：国产替代背景下的战略路径与实践指南

🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C、C#等开发语言，熟悉Java常用开…...

编程日记 2025/5/5 21:38:40

Python内置方法干货总结

如果你还在为提升Python代码能力发愁，那么掌握内置方法就是你的捷径！很多初学者和进阶者忽略了这一“宝藏”，其实，Python的内置方法不仅能让你代码更简洁，还能大幅提升开发效率。今天，咱们就来一次系统梳理…...

编程日记 2025/5/24 20:52:38

小草GrassRouter多卡聚合路由器聚合卫星、MESH网络应用解决方案

一、多网融合解决方案卫星网络融合‌ 支持接入卫星通信模块，在无地面网络覆盖的极端场景（如偏远山区、海洋救援）下，形成“5G卫星”双链路冗余传输，卫星链路可作为核心通信备份，确保关键指令和视频数据实…...

编程日记 2025/5/5 21:37:26

Spring反射机制

Spring反射机制反射机制是加载类时，在运行时动态地获取类的信息，并且可以操作类或对象的属性、方法、构造函数等成员的能力。在 Java 里，反射机制的实现主要依赖于 java.lang.reflect 包下的多个类，以及 java.lang 包中的 Class…...

编程日记 2025/5/5 21:37:24

PCB硬件电路设计_pcb布线设计

1.MCU最小系统电路这些电路都会非常接近MCU，他们的可靠性决定了MCU能否正常工作。外围电路，为了布线整齐美观，尽量避免打过多的通孔。在布局的时候走线的顺序和元器件顺序尽可能的保持一直避免走线交叉。 2.晶振电路布线一般情况下我们…...

编程日记 2025/5/5 21:37:29

Qt开发：XML文件的写入与读取

文章目录一、使用 QDomDocument操作节点1.1 将信息写入XML文件中1.2.从XML文件中读取信息二、使用 QXmlStreamWriter操作节点2.1 将信息写入XML文件中2.2 从XML文件中读取信息三、总结一、使用 QDomDocument操作节点 1.1 将信息写入XML文件中 #include <QDomDocument&…...

编程日记 2025/5/5 21:37:20

PCI/PXI 总线的可编程电阻卡

701X 系列是阿尔泰科技基于 PCI/PXI 总线的可编程电阻卡，多种电阻范围可选，稳定性好；准确度低至 0.2%；分辨率设置精细，可低至 0.125Ω，适用于传感器仿真应用。 701X 系列高精度程控电阻模块具有高设置分辨…...

编程日记 2025/5/5 21:37:24

火语言RPA--腾讯云存储

【组件功能】：存储本地文件至腾讯云选择本地文件，通过腾讯云存储配置上传至腾讯云对象存储的指定地域指定存储桶指定路径。配置预览配置说明 SecretId 支持T或# 前往官网获取或创建。参考链接：https://console.cloud.tencent.com/cam/…...

编程日记 2025/5/5 21:38:29

使用POI和EasyExcel使用导入

1.使用POI导入 1.1导入依赖 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>4.1.2</version></dependency> 1.2创建工具类 package com.ruoyi.common.utils.poi;import org.ap…...

编程日记 2025/5/24 20:10:10

AWS PrivateLink vs Lattice：深度解析两大网络服务的异同

导语：在AWS的网络服务生态中，PrivateLink和Lattice都是备受关注的解决方案。本文将深入探讨这两项服务的核心特性、应用场景以及它们之间的关键区别，帮助您在复杂的网络架构设计中做出明智的选择。一、AWS PrivateLink 概述定义 AWS PrivateLink 是一种网络服务，允许您…...

编程日记 2025/5/5 21:37:19

Linux系统编程---exec簇：进程的加载与替换

1、exec簇基础在Linux中，用于加载并执行指定程序的API有exec簇和system函数。 exec簇的进程替换不会创建一个新的进程，只是加载新的程序代码和数据，替换当前进程执行的程序代码。 system函数的进程替换是创建一个新的子进程，然后…...

编程日记 2025/5/5 21:37:22

C++ 之【模拟实现 list（节点、迭代器、常见接口）】(将三个模板放在同一个命名空间就实现 list 啦)

1.前提准备 (1) list 的底层结构一般是带头双向循环链表 (1)为避免命名冲突，需要创建一个命名空间来存放模拟实现的 list (2)下面模拟实现list时，声明和定义不分离(具体原因后续讲解) 2.完整实现 2.1 链表节点 template<class T>//节点写成类模板…...

编程日记 2025/5/5 21:37:23

数字图像处理 -- 眼底图像血管分割方法

算法框架基于深度学习的 U-Net 架构，结合注意力机制（Attention Gate）与多尺度特征提取，以提高细小血管的检测能力。整体流程如下： 输入图像预处理：提取绿色通道 & CLAHE 增强数据增强：旋…...

编程日记 2025/5/24 19:54:48

基于ffmpeg的音视频编码

1 音频编码本质上是由pcm文件转到一个协议文件比如说aac协议 1.1 音频基本知识回归比特率比特率是指单位时间内传输或处理的比特（bit）数量，通常用 bps（bits per second，比特每秒）来表示。它是衡量数…...

编程日记 2025/5/5 21:38:30

Android wifi开发调试总结

Android wifi开发调试简单总结文章目录 Android wifi开发调试简单总结一、前言二、wifi demo开发1、开关和连接2、wifi开启主要流程3 、wifi主要广播4、相关日志5、demo示例三、其他1、Wifi开发小结2、其他wifi知识小结（1）Android无线Wifi开发&#xf…...

编程日记 2025/5/5 21:38:31

LLVIP、KAIST、M3FD数据集

LLVIP、KAIST、M3FD数据集 （可见光红外，双模态数据集，已配准已对齐已清洗，已处理为txt格式，YOLO可直接训练） 电子产品，一经出售，概不退换算法设计、毕业设计、期刊专利！…...

编程日记 2025/5/15 6:32:41

datasets 数据处理封装后，统一处理流程以避免Dataset Map顺序依赖问题

文章目录处理流程说明小结在实际项目中，我们常常需要对数据集进行预处理。为了规范操作，我封装了一个基础数据集处理类： class DatasetAbstract:"""所有数据集都应包含以下几个字段：* question：用户…...

编程日记 2025/5/7 11:01:27

【学习笔记】机器学习(Machine Learning) | 第四章(3)| 多变量线性回归

机器学习（Machine Learning） 简要声明基于吴恩达教授(Andrew Ng)课程视频 BiliBili课程资源文章目录机器学习（Machine Learning）简要声明三、特征工程与多项式回归（一）特征工程：从数据中发…...

编程日记 2025/4/29 9:31:24

将本地Springboot项目部署到Linux服务器

1、打包后端项目在IDEA的终端上执行命令 mvn clean package "-Dmaven.test.skiptrue" 在target目录下查看jar包是否存在 2、idea运行jar包（可选） 在IDEA的终端上执行命令 # 进入jar包所在目录 E:\LzpWorkspaces\lzp-records> cd .\tar…...

编程日记 2025/5/21 22:53:22

无人设备遥控器之实时数据保护技术篇

无人设备遥控器的实时数据保护技术是保障设备安全运行、避免信息泄露或恶意干扰的核心手段，其核心目标是在复杂电磁环境和网络攻击威胁下，确保指令传输的完整性、保密性和抗干扰性。一、技术实现路径链路层加密与认证动态密钥协商：采用…...

编程日记 2025/4/29 9:31:23

【优秀三方库研读】【性能优化点滴】odygrd/quill 解决伪共享

一、伪共享（False Sharing）问题本质当不同CPU核心频繁修改**同一缓存行（Cache Line）**中的不同变量时，会导致严重的性能下降。现代CPU的缓存系统以缓存行（通常64字节）为单位操作内存&#xff…...

编程日记 2025/4/29 9:29:19

JavaScript性能优化实战（6）：网络请求与资源加载优化

引言在现代Web应用开发中，网络性能已成为影响用户体验的关键因素。据统计，用户等待页面加载的耐心通常不超过3秒，超过这个时间，约40%的用户会选择离开。此外，Google的研究表明，页面加载时间每增加0.5秒，流量就会下降约20%。因此，优化网络请求和资源加载不仅关乎用户体…...

编程日记 2025/5/24 20:03:16

BUUCTF在线评测 int wmain() {FILE *v0; // eaxFILE *v1; // eaxchar v3; // [esp3h] [ebp-405h]char v4[256]; // [esp4h] [ebp-404h] BYREFchar Format[256]; // [esp104h] [ebp-304h] BYREFchar v6[256]; // [esp204h] [ebp-204h] BYREFchar v7[256]; // [esp304h] [ebp-10…...

编程日记 2025/4/29 9:28:15

Python中的单例模式：深入探索元类与装饰器实现

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界单例模式（Singleton Pattern）是设计模式中的一种重要模式，确保一个类在整个应用中只有一个实例，并且提供全局访问点。Python语言作为一…...

编程日记 2025/5/7 8:52:08

深入解析 Babylon.js 中的 TransformNode.lookAt 方法

在 3D 开发中，控制对象朝向是一个基础但关键的需求。Babylon.js 作为一款强大的 Web3D 引擎，提供了 TransformNode.lookAt 方法来实现这一功能。本文将全面解析这个方法的使用技巧、参数含义以及常见应用场景。方法基础 TransformNode.lookAt 的基本签…...

编程日记 2025/5/16 23:02:55

SpringCloud组件——Gateway

一.网关 1.问题提出我们通过Eureka，Nacos解决了服务注册，服务发现的问题，使用SpringCloud LoadBalance解决了负载均衡的问题，使用OpenFeign解决了远程调用的问题。但是当前所有微服务的接口都是直接对外暴露的，可…...

编程日记 2025/4/29 9:24:58

Boost 库安装 (windows 11)

Boost 库安装 (windows 11 1 下载2 生成3 使用 1 下载下载地址：https://www.boost.org/ 有的时候会需要历史版本下载： https://www.boost.org/users/history/ 2 生成 1、解压后点击 bootstrap.bat，会生成可执行程序b2.exe 2、双击运行b2.…...

编程日记 2025/5/22 9:33:25

lmms-eval--微调实战笔记

lmms-eval--大模型调用平台，方便新手上手大模型微调 lmms-eval的更多用法,没有mathversehttps://github.com/EleutherAI/lm-evaluation-harness.git 单卡运行，模型gpt-j-6B，数据集hellaswag git clone --depth 1 https://github.com/Eleuthe…...

编程日记 2025/5/24 19:43:47

序列密码算法ShanLooog512设计原理详解

序列密码算法ShanLooog512设计原理详解 ShanLooog512(闪龙512)为序列密码算法，内部状态为512比特，密钥长度为128或256比特，轮函数为FFFFFFFF，循环轮数为24轮，输出密钥流为512比特的状态。与Salsa20类似，内…...

编程日记 2025/5/18 2:33:11

Matplotlib可视化基础

1. 折线图 matplotlib.pyplot.plot() # 主要参数： x,y -- 接收array，表示X轴和Y轴对应的数据，无默认 color -- 接收特定string，指定线条的颜色，默认为None linestyle -- 接收特定string，指定线条的类型…...

编程日记 2025/5/1 20:15:08

Linux 内核网络协议栈中的关键数据结构：inet_skb_parm 与 ip_options

在 Linux 内核的网络协议栈中，数据包的高效处理依赖于一系列精心设计的数据结构。这些结构体不仅需要存储网络数据的元信息，还需支持复杂的协议逻辑（如路由、分片、安全策略等）。本文聚焦两个核心结构体 struct inet_skb_parm 和 struct ip_options，解析它们的设计原理、功…...

编程日记 2025/5/9 14:00:18

oracle 数据库查询指定用户下每个表占用空间的大小，倒序显示

oracle 查询指定用户下每个表占用空间的大小，倒序显示使用场景：数据分析；导出医院正式库到开发环境时，查询出占用表空间高的业务表、导出时排除该表在Oracle数据库中，要查询指定用户下每个表占用空间的大小并以倒序…...

编程日记 2025/5/6 17:06:55

Missashe考研日记-day29

Missashe考研日记-day29 1 专业课408 学习时间：3h学习内容： 今天先是把虚拟存储剩余的课听完了，然后就是做课后选择题，57道，已经接受了OS课后题尤其多的事实了。解决并且理解完习题之后就开始预习文件管理的内容&…...

编程日记 2025/4/29 9:22:48

【AI】【MCP】搭建私人王炸MCP自动化工作流

目录一、什么是MCP 二、MCP大集合三、准备工作 3.1 安装node.js 3.2 安装vscode 3.3 安装cline插件 3.3.1 安装 3.3.2 配置Cline 四、配置MCP服务 4.1 Search-mcp服务 4.2 playwright-mcp 服务前言：梦想组合，轻松办公，告别手动&a…...

编程日记 2025/5/19 21:06:36

多元函数微分之传统方法和全微分法

一、传统方法使用链式法则，先对中间变量（如 u,v）求偏导，再乘以中间变量对最终变量（如 x,y）的偏导。二、全微分法基于全微分形式不变性，直接对 zf(u,v) 求全微分 dz，再代入 du 和…...

编程日记 2025/5/15 11:22:24

新手SEO基础优化全解析

内容概要对于刚接触SEO的新手而言，系统化理解优化逻辑是避免无效操作的关键。本文将从基础概念入手，逐步拆解搜索引擎排名的影响要素，围绕关键词分析、技术优化、内容策略三大核心模块，提供可落地的操作框架。通过结合工具使用说…...

编程日记 2025/4/29 9:21:43

MATLAB退火算法和遗传算法解决旅行商问题

模拟退火算法和遗传算法都是常用于解决旅行商问题（TSP）的优化算法，它们在原理、搜索方式、收敛速度和适用场景等方面存在一些区别： 原理模拟退火算法：模拟退火算法的灵感来源于固体退火原理。固体在加热后缓慢冷却时…...

编程日记 2025/4/29 9:20:40

喜马拉雅卖身腾讯音乐：在线音频独立时代的终结

坦白说，这条消息一出来，喜马拉雅被卖掉不太奇怪，但是腾讯音乐会收购，还是有点意外。喜马拉雅之前一度被称为中国版Audible平台，在过去几年里，活生生地把一手好牌打得稀烂。如今走到“卖身”这一步，既是无奈，也是必然。简单回顾一下背景： 2012年，喜马拉雅成立，一…...

编程日记 2025/4/29 9:20:39

简单理解https与http

都是超文本传输协议，一个安全一个不安全，名字长的安全，名字短的不安全。安全与不安全是居于什么分别的？ 通过加密 http无加密。 httpshttp SSL/TSL（加密）来保障数据安全。加密传输身份验证 SSL/TLS…...

编程日记 2025/5/13 2:59:53

打造即插即用的企业级云原生平台——KubeSphere 4.1 扩展组件在生产环境的价值全解

目录打造即插即用的企业级云原生平台——KubeSphere 4.1 扩展组件在生产环境的价值全解 1. 可观测体系：WhizardTelemetry 全家桶 2. 平台与多集群治理 3. CI/CD 与交付效率 4. 网络与流量入口 5. 安全与合规 6. 存储与数据保护 7. 平台集成优势结语打造…...

编程日记 2025/5/17 21:51:25

配置扩展ACL

1.扩展ACL简介： 扩展ACL可以更精确地控制基于源IP地址、目标IP地址、协议类型和端口号的流量。 2.配置背景： 为了实现公司内部只能使用FTP服务器传输文件并关闭其他所有服务和端口的需求，可以通过配置访问控制列表（ACL&#xf…...

编程日记 2025/5/23 19:13:29

根据用户出生日期计算年龄

public static int calculateAgeFromDate(Date birthDate) { // 将 Date 转换为 LocalDate（默认时区） LocalDate birthLocalDate birthDate.toInstant() .atZone(ZoneId.systemDefault()) .toLocalDate(); // 获取当前日期LocalDate currentDate Local…...

编程日记 2025/5/24 5:19:35

测试基础笔记第十五天

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、集合1.集合的定义二、使用集合列表去重导包二、函数1.函数介绍2.定义函数3.调用函数4.函数实现登录案例5.函数的返回值三、模块和包1.模块的概念(Module)2.模…...

编程日记 2025/5/20 5:36:37

【专题四】前缀和（3）

📝前言说明： 本专栏主要记录本人的基础算法学习以及LeetCode刷题记录，按专题划分每题主要记录：（1）本人解法本人屎山代码；（2）优质解法优质代码；&#xff…...

编程日记 2025/5/6 14:14:29

STM32 USB配置详解

STM32 USB配置详解一、USB基础概念 1.1 USB简介 USB (Universal Serial Bus) 是一种用于计算机与外部设备连接的串行总线标准，具有热插拔、即插即用等特点。STM32微控制器内置了多种USB接口，可实现各类USB应用。 1.2 USB速度等级 Low Speed (LS): …...

编程日记 2025/4/29 9:18:25

2025年Mapbox零基础入门教程（1）地图初始化

什么是mapbox？ mapbox是一个地图框架，不仅提供前端渲染能力，还具备后端服务接口能力。相较于openlayers，它可构建二维和三维地图，并支持优化导航路线和位置查询等功能。开发中使用mapbox需引入库文件并设置token&…...

编程日记 2025/4/29 9:18:24

课外知识：你需要了解的Python类对象里面的getattr方法

你需要了解的Python类对象中的__getattr__方法一、__getattr__基础概念 1. 方法定义 def __getattr__(self, name: str) -> Any:"""当访问不存在的属性时触发"""2. 核心特性动态属性处理：拦截未定义的属性访问按需触发&…...

编程日记 2025/4/29 9:18:23

openGauss新特性 | DataKit支持PostgreSQL到openGauss的迁移能力

Postgresql-\>openGauss迁移工具debezium-connector-postgres 可获得性本特性自openGauss 7.0.0-RC1版本开始引入。特性简介 debezium-connector-postgres工具是一个基于Java语言的Postgresql到openGauss的复制工具。该工具提供了初始全量数据及对象（视图、…...

编程日记 2025/5/9 18:40:31

【前端】跟进新趋势- PWA WebAssembly

不定期更新及补充实战。建议关注收藏点赞。目录 PWA（渐进式 Web 应用，Progressive Web App）WebAssembly（WASM） PWA（渐进式 Web 应用，Progressive Web App） PWA 是一种提升 Web 应用…...

编程日记 2025/4/29 9:17:20

概览

前言