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

Vue3 ref与props

ref 属性 与 props

一、核心概念对比

特性ref (标签属性)props
作用对象DOM 元素/组件实例组件间数据传递
数据流向父组件访问子组件/DOM父组件 → 子组件
响应性直接操作对象单向数据流(只读)
使用场景获取 DOM/调用子组件方法组件参数传递
Vue3 变化不再自动数组形式需要 defineProps 声明

二、ref 属性的深度解析

1. 基础用法
<!-- 获取 DOM 元素 -->
<template><input ref="inputRef" type="text"><ChildComponent ref="childRef" />
</template><script setup>
import { ref, onMounted } from 'vue'// DOM 引用
const inputRef = ref(null)// 组件引用
const childRef = ref(null)onMounted(() => {inputRef.value.focus() // 操作 DOMchildRef.value.sayHello() // 调用子组件方法
})
</script>
2. 组件引用规范
// 子组件 ChildComponent.vue
<script setup>
// 必须暴露方法才能被父组件调用
defineExpose({sayHello: () => console.log('Hello from child!'),childData: ref('子组件数据')
})
</script>
3. 类型安全(TypeScript)
// 父组件中定义组件引用类型
import ChildComponent from './ChildComponent.vue'const childRef = ref<InstanceType<typeof ChildComponent>>()

三、props 的响应式处理

1. 基础声明
<!-- 父组件 -->
<ChildComponent :title="parentTitle" /><!-- 子组件 -->
<script setup>
const props = defineProps({title: {type: String,required: true}
})
</script>
2. 保持响应性
// 正确方式:使用 toRef
import { toRef } from 'vue'const title = toRef(props, 'title')// 错误!直接解构会失去响应性
// const { title } = props

四、联合使用场景

场景:表单验证组件
<!-- 父组件 -->
<template><ValidationForm ref="formRef" :rules="validationRules"@submit="handleSubmit"/>
</template><script setup>
const formRef = ref(null)
const validationRules = ref({/* 验证规则 */})// 调用子组件方法
const validateForm = () => {formRef.value.validate()
}
</script>
<!-- 子组件 ValidationForm.vue -->
<script setup>
defineProps(['rules'])const validate = () => {// 执行验证逻辑
}// 暴露方法给父组件
defineExpose({ validate })
</script>

五、核心差异总结

对比维度ref (标签属性)props
数据方向父 → 子(操作子组件/DOM)父 → 子(数据传递)
可修改性可直接修改子组件暴露的内容只读(需通过事件通知父组件修改)
响应式机制直接引用对象需要 toRef 保持响应性
典型应用DOM操作/调用子组件方法组件参数配置
组合式 API通过 ref() 创建引用通过 defineProps 声明

六、最佳实践指南

1. ref 使用原则
  • 最小化暴露:只暴露必要的组件方法/数据

  • 避免直接修改:不要通过 ref 直接修改子组件状态

  • 配合 TypeScript:使用类型定义确保安全访问

2. props 使用规范
  • 只读原则:始终视 props 为不可变数据

  • 响应式转换:使用 toRef 处理需要响应式的 props

  • 明确验证:始终定义 props 的类型验证


七、常见问题解决

Q1: 为什么通过 ref 访问子组件属性得到 undefined

原因:子组件未通过 defineExpose 暴露属性
解决方案

// 子组件
defineExpose({publicMethod: () => {/* ... */}
})
Q2: 如何同时使用 ref 和 v-for
<template><ChildComponent v-for="item in list" :key="item.id":ref="setItemRef"/>
</template><script setup>
const itemRefs = ref([])const setItemRef = el => {if (el) itemRefs.value.push(el)
}
</script>
Q3: 如何类型安全地组合 ref 和 props
// 父组件
import ChildComponent from './ChildComponent.vue'type ChildComponentExpose = {validate: () => boolean
}const childRef = ref<ChildComponentExpose>()// 子组件
defineExpose<ChildComponentExpose>({validate: () => true
})

八、综合应用示例

父组件

<template><UserFormref="userForm":user-data="formData"@submit="handleSubmit"/><button @click="validateForm">验证表单</button>
</template><script setup lang="ts">
import { ref } from 'vue'
import UserForm from './UserForm.vue'type UserFormExpose = {validate: () => booleanresetForm: () => void
}const userForm = ref<UserFormExpose>()
const formData = ref({ name: '', email: '' })const validateForm = () => {if (userForm.value?.validate()) {console.log('表单验证通过')}
}const handleSubmit = (data) => {console.log('提交数据:', data)
}
</script>

子组件 UserForm.vue

<template><form @submit.prevent="submitForm"><input v-model="localData.name"><input v-model="localData.email"><button type="submit">提交</button></form>
</template><script setup lang="ts">
import { ref, toRefs } from 'vue'const props = defineProps<{userData: {name: stringemail: string}
}>()const emit = defineEmits(['submit'])// 本地副本(避免直接修改 props)
const localData = ref({ ...props.userData })const validate = () => {return localData.value.name.length > 0 && localData.value.email.includes('@')
}const resetForm = () => {localData.value = { name: '', email: '' }
}const submitForm = () => {emit('submit', localData.value)
}defineExpose({validate,resetForm
})
</script>

关键总结:

  1. ref 属性:用于直接访问 DOM/子组件实例,需要配合 defineExpose 使用

  2. props:用于父组件向子组件传递数据,需保持只读特性

  3. 协作模式

    • 父组件通过 props 传递数据

    • 子组件通过事件通知父组件

    • 必要时通过 ref 调用子组件方法

  4. 类型安全:使用 TypeScript 类型定义确保可靠访问


事件传递

在 Vue3 中,子组件向父组件传递数据主要通过 事件机制 实现。以下是 5 种主要实现方式及其使用场景:


一、基础事件传递 (推荐)

实现方式
子组件触发自定义事件 → 父组件监听事件

<!-- 子组件 ChildComponent.vue -->
<script setup>
const emit = defineEmits(['sendData']) // 声明事件const sendToParent = () => {emit('sendData', { message: 'Hello from child!' }) // 触发事件
}
</script><template><button @click="sendToParent">发送数据</button>
</template>
<!-- 父组件 ParentComponent.vue -->
<template><ChildComponent @send-data="handleData" />
</template><script setup>
const handleData = (payload) => {console.log(payload.message) // 输出:Hello from child!
}
</script>

最佳实践

  • 使用 kebab-case 事件名(如 send-data

  • 通过 TypeScript 定义事件类型:

    const emit = defineEmits<{(e: 'sendData', payload: { message: string }): void
    }>()

二、v-model 双向绑定 (表单场景推荐)

实现原理
v-model 是 :modelValue + @update:modelValue 的语法糖

<!-- 子组件 InputComponent.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])const updateValue = (e) => {emit('update:modelValue', e.target.value)
}
</script><template><input :value="modelValue" @input="updateValue">
</template>
<!-- 父组件 -->
<template><InputComponent v-model="inputValue" />
</template><script setup>
const inputValue = ref('')
</script>

多 v-model 绑定

<ChildComponent v-model:name="userName"v-model:age="userAge"
/>

三、异步回调模式 (需要返回值时)

适用场景:需要等待父组件处理结果的异步操作

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['request'])const handleClick = async () => {const response = await emit('request', { id: 123 })console.log('父组件返回:', response)
}
</script>
<!-- 父组件 -->
<template><ChildComponent @request="handleRequest" />
</template><script setup>
const handleRequest = async (payload) => {const data = await fetchData(payload.id)return data // 返回给子组件
}
</script>

四、Expose 方法调用 (需要直接访问子组件)

<!-- 子组件 -->
<script setup>
const childData = ref('子组件数据')defineExpose({getData: () => childData.value,updateData: (newVal) => childData.value = newVal
})
</script>
<!-- 父组件 -->
<template><ChildComponent ref="childRef" />
</template><script setup>
const childRef = ref(null)const getChildData = () => {console.log(childRef.value?.getData()) // 输出:子组件数据childRef.value?.updateData('新数据')
}
</script>

五、状态管理方案 (跨组件通信)

适用场景:多层嵌套组件或兄弟组件通信

// store/counter.js
import { reactive } from 'vue'export const counterStore = reactive({count: 0,increment() {this.count++}
})
<!-- 子组件 -->
<script setup>
import { counterStore } from './store/counter'const updateCount = () => {counterStore.increment()
}
</script>
<!-- 父组件 -->
<script setup>
import { counterStore } from './store/counter'
</script><template>当前计数:{{ counterStore.count }}
</template>

方法对比表

方法适用场景优点缺点
基础事件传递简单数据传递直观明确多层嵌套时需逐层传递
v-model 绑定表单输入组件语法简洁仅适用简单双向绑定
异步回调模式需要父组件响应结果支持异步交互逻辑复杂度稍高
Expose 方法需要直接操作子组件灵活性强破坏组件封装性
状态管理跨组件/复杂场景解耦组件关系需要额外学习成本

最佳实践指南

  1. 优先使用事件传递:保持组件独立性

  2. 复杂场景用状态管理:Pinia 是 Vue3 官方推荐方案

  3. v-model 用于表单:保持双向绑定的简洁性

  4. 避免滥用 ref:防止组件过度耦合

  5. TypeScript 类型定义

    // 事件类型定义
    defineEmits<{(e: 'updateData', payload: { id: number }): void(e: 'cancel'): void
    }>()// Props 类型定义
    defineProps<{userId: numberuserName: string
    }>()

完整示例:购物车组件交互

<template><div class="cart-item"><span>{{ item.name }}</span><input type="number" :value="item.quantity"@input="updateQuantity($event.target.value)"><button @click="emit('remove', item.id)">删除</button></div>
</template><!-- 子组件 CartItem.vue -->
<script setup>
const props = defineProps({item: {type: Object,required: true}
})const emit = defineEmits(['update:quantity', 'remove'])const updateQuantity = (newQty) => {emit('update:quantity', {id: props.item.id, qty: newQty})
}
</script>
<template><CartItem v-for="item in cartItems":key="item.id":item="item"@update:quantity="handleUpdate"@remove="handleRemove"/>
</template><!-- 父组件 ShoppingCart.vue -->
<script setup>
const cartItems = ref([{ id: 1, name: '商品A', quantity: 2 },{ id: 2, name: '商品B', quantity: 1 }
])const handleUpdate = ({ id, qty }) => {const item = cartItems.value.find(i => i.id === id)if (item) item.quantity = Number(qty)
}const handleRemove = (id) => {cartItems.value = cartItems.value.filter(i => i.id !== id)
}
</script>

相关文章:

Vue3 ref与props

ref 属性 与 props 一、核心概念对比 特性ref (标签属性)props作用对象DOM 元素/组件实例组件间数据传递数据流向父组件访问子组件/DOM父组件 → 子组件响应性直接操作对象单向数据流&#xff08;只读&#xff09;使用场景获取 DOM/调用子组件方法组件参数传递Vue3 变化不再自…...

SpringBoot | 构建客户树及其关联关系的设计思路和实践Demo

关注&#xff1a;CodingTechWork 引言 在企业级应用中&#xff0c;客户关系管理&#xff08;CRM&#xff09;是核心功能之一。客户树是一种用于表示客户之间层级关系的结构&#xff0c;例如企业客户与子公司、经销商与下级经销商等。本文将详细介绍如何设计客户树及其关联关系…...

SpringCloud——负载均衡

一.负载均衡 1.问题提出 上一篇文章写了服务注册和服务发现的相关内容。这里再提出一个新问题&#xff0c;如果我给一个服务开了多个端口&#xff0c;这几个端口都可以访问服务。 例如&#xff0c;在上一篇文章的基础上&#xff0c;我又新开了9091和9092端口&#xff0c;现在…...

Springboot3+ JDK21 升级踩坑指南

目录 GetMapping和 RequestBody 一起使用时&#xff0c;会把请求方式由GET变为POST 变更默认的httpClient feign 超时配置失效 GetMapping和 RequestBody 一起使用时&#xff0c;会把请求方式由GET变为POST 变更默认的httpClient 添加依赖 <dependency><groupId&g…...

Qt UDP组播实现与调试指南

在Qt中使用UDP组播(Multicast)可以实现高效的一对多网络通信。以下是关键步骤和示例代码: 一、UDP组播核心机制 组播地址:使用D类地址(224.0.0.0 - 239.255.255.255)TTL设置:控制数据包传播范围(默认1,同一网段)网络接口:指定发送/接收的物理接口二、发送端实现 /…...

idea连接远程服务器kafka

一、idea插件安装 首先idea插件市场搜索“kafka”进行插件安装 二、kafka链接配置 1、检查服务器kafka配置 配置链接前需要保证远程服务器的kafka配置里边有配置好服务器IP&#xff0c;以及开放好kafka端口9092&#xff08;如果有修改 过端口的开放对应端口就好&#xff09; …...

第十节:性能优化高频题-虚拟DOM与Diff算法优化

优化策略&#xff1a;同层比较、静态节点标记、最长递增子序列算法 Key的作用&#xff1a;精确识别节点身份 虚拟DOM与Diff算法深度优化策略解析 一、核心优化策略 同层比较机制 Diff算法仅对比同一层级的虚拟节点&#xff0c;避免跨层级遍历带来的性能损耗。 • 实现原理&am…...

vmware workstation的下载地址页面

Fusion and Workstation | VMware...

kubernetes》》k8s》》Dashboard

安装Dashboard 因为我的Kubernetes 版本是 v1.28.2 对应的 Dashboard V2.7.0 wget -O https://raw.githubusercontent.com/kubernetes/dashboard/v2.7.0/aio/deploy/recommended.yaml # 因为默认是集群内访问的&#xff0c;需要追加 NodePort访问类型 vim recommended.yaml …...

软考:数值转换知识点详解

文章目录 1. 进制转换1.1 二进制&#xff08;Binary&#xff09;、八进制&#xff08;Octal&#xff09;、十进制&#xff08;Decimal&#xff09;、十六进制&#xff08;Hexadecimal&#xff09;之间的转换1.2 手动转换和计算方法1.3 使用编程语言进行进制转换 2. 数据类型转换…...

第15章:MCP服务端项目开发实战:性能优化

第15章:MCP服务端项目开发实战:性能优化 在构建和部署 MCP(Memory, Context, Planning)驱动的 AI Agent 系统时,性能和可扩展性是关键的考量因素。随着用户量、数据量和交互复杂度的增加,系统需要能够高效地处理请求,并能够平滑地扩展以应对更高的负载。本章将探讨 MCP…...

Windows申请苹果开发者测试证书Uniapp使用

注意事项 苹果设备,最好是iPhone XS以上,要不然下载不了Apple DeveloperopenSSL 要是V1版本的来生成证书,要不然HBuilder报错按步骤来,生成证书,生成标识符,添加测试设备,生成描述性文件注册苹果开发者账号 (如果有苹果账号直接登录) 苹果开发者官网 开通付费 点击右上…...

服务器数据恢复—NAS存储中raid5上层lv分区数据恢复案例

NAS数据恢复环境&#xff1a; QNAP TS-532X NAS设备中有两块1T的SSD固态硬盘和3块5T的机械硬盘。三块机械硬盘组建了一组RAID5阵列&#xff0c;两块固态硬盘组建RAID1阵列。划分了一个存储池&#xff0c;并通过精简LVM划分了7个lv。 NAS故障&#xff1a; 硬盘故障导致无法正常…...

uniapp跨平台开发---switchTab:fail page `/undefined` is not found

问题描述 在项目中新增了一个底部tab导航栏,点击底部tabBar,跳转失败,控制台打印错误信息switchTab:fail page /undefined is not found 排查思路 错误信息提示,switchTab跳转的页面路径变成了/undefined,排查新增的pages.json文件,发现pages,以及tabBar中的list均已经加入该导…...

详细讲解 QMutex 线程锁和 QMutexLocker 自动锁的区别

详细讲解 QMutex 线程锁和 QMutexLocker 自动锁的区别 下面我们详细拆解 Qt 中用于线程同步的两个核心类&#xff1a;QMutex 和 QMutexLocker。 &#x1f9f1; 一、什么是 QMutex&#xff1f; QMutex 是 Qt 中的互斥锁&#xff08;mutex&#xff09;类&#xff0c;用于防止多个…...

如何获取静态IP地址?完整教程

静态IP地址&#xff0c;因其固定不变的特性&#xff0c;在远程访问、服务器搭建、电商多开、游戏搬砖等场景中显得尤为重要。以下是获取静态IP地址的完整教程&#xff0c;涵盖家庭网络、企业网络和公网静态IP的配置方法&#xff1a; 一、什么是静态IP&#xff1f; 内网IP&…...

JavaScript 里创建对象

咱们来用有趣的方式探索一下 JavaScript 里创建对象的各种“魔法咒语”&#xff01; 想象一下&#xff0c;你是一位魔法工匠&#xff0c;想要在你的代码世界里创造各种奇妙的“魔法物品”&#xff08;也就是对象&#xff09;。你有好几种不同的配方和工具&#xff1a; 1. 随手…...

【华为HCIP | 华为数通工程师】821—多选解析—第十五页

多选794、以下关于高可用性网络特点的描述,正确的是哪些项? A、不会出现故障 B、不能频出现故障 C、一旦出现故障只通过人工干预恢复业务 D出现故障后能很快恢复 解析:高可用性网络拥有良好的可靠性,不间断转发NSF…...

Kaamel视角下的MCP安全最佳实践

在以AI为核心驱动的现代产品体系中&#xff0c;大模型逐渐从实验室走向生产环境&#xff0c;如何确保其在推理阶段的信息安全和隐私保护&#xff0c;成为各方关注的重点。Model Context Protocol&#xff08;MCP&#xff09; 作为一个围绕模型调用上下文进行结构化描述的协议&a…...

Kafka 命令行操作与 Spark-Streaming 核心编程总结

一、Kafka 命令行操作详解 1.创建 Topic 命令格式&#xff1a; kafka-topics.sh --create --zookeeper <zk节点列表> --topic <主题名> --partitions <分区数> --replication-factor <副本数> 参数说明&#xff1a; 分区数&#xff08;partitions…...

【华为OD机试真题】428、连续字母长度 | 机试真题+思路参考+代码解析(E卷)(C++)

文章目录 一、题目题目描述输入输出样例1样例2 一、代码与思路&#x1f9e0;C语言思路✅C代码 一、题目 参考&#xff1a;https://sars2025.blog.csdn.net/article/details/139492358 题目描述 ◎ 给定一个字符串&#xff0c;只包含大写字母&#xff0c;求在包含同一字母的子串…...

nodejs获取请求体的中间件 body-parse

虽然 Express 4.16.0 之后已经内置了处理请求体的功能&#xff08;express.json() 和 express.urlencoded()&#xff09;&#xff0c;但你也可以单独使用老牌中间件 body-parser&#xff0c;它仍然很常用&#xff0c;尤其在某些旧项目中。 &#x1f4e6; 一、安装 body-parser …...

5.学习笔记-SpringMVC(P61-P70)

SpringMVC-SSM整合-接口测试 (1)业务层接口使用junit接口做测试 (2)表现层用postman做接口测试 (3)事务处理— 1&#xff09;在SpringConfig.java&#xff0c;开启注解&#xff0c;是事务驱动 2&#xff09;配置事务管理器&#xff08;因为事务管理器是要配置数据源对象&…...

腾讯云服务器安全——服务防火墙端口放行

点击服务进入安全策略 添加规则...

mfc学习(一)

mfc为微软创建的一个类qt框架的客户端程序&#xff0c;只不过因为微软目前有自己 的亲身儿子C#&#xff08;.net&#xff09;,所以到2010没有进行维护。然后一些的工业企业还在继续进行维护相关的内容。我目前就接手一个现在这样的项目&#xff0c;其实本质与qt的思路是差不多的…...

【MQ篇】初识RabbitMQ保证消息可靠性

&#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&#xff0c;可以多多支持一下&#xff0c;感谢&#x1f917;&#xff01; &#x1f31f;了解 MQ 请看 &#xff1a; 【MQ篇】初识MQ&#xff01; 其他优质专栏&#xff1a; 【&…...

神经网络基础[ANN网络的搭建]

神经网络 人工神经网络&#xff08; Artificial Neural Network&#xff0c; 简写为ANN&#xff09;也简称为神经网络&#xff08;NN&#xff09;&#xff0c;是一种模仿生物神经网络结构和功能的计算模型。各个神经元传递复杂的电信号&#xff0c;树突接收到输入信号&#xf…...

【技术派后端篇】整合WebSocket长连接实现消息实时推送

在技术派平台中&#xff0c;实现了文章被点赞或评论后&#xff0c;在右上角实时弹出消息提醒的功能。相较于之前仅有的消息通知红色标识&#xff0c;这种实时通知在交互体验上有显著提升。本文将详细介绍如何借助WebSocket实现消息的实时通知。 1 基础知识点 1.1 相关概念 W…...

​Janus Pro

目录 一、模型概述与开源情况 二、模型能力与性能 三、竞品分析 四、部署成本与个人部署成本比较 五、其他维度比较 1. 模型架构与创新性 2. 社区支持与生态系统 3. 更新频率与维护 4. 适用场景与灵活性 5. 商业化潜力 六、总结 Janus Pro 是中国初创公司 DeepSeek …...

[密码学实战]在Linux中实现SDF密码设备接口

[密码学实战]在Linux中实现SDF密码设备接口 引言 在密码学应用开发中,SDF(Security Device Interface)作为中国国家密码管理局制定的密码设备接口标准,被广泛应用于金融、政务等领域的安全系统中。本文将以GmSSL国产密码库为基础,手把手指导在Linux系统中部署SoftSDF——…...

机器学习基础 - 分类模型之SVM

SVM:支持向量机 文章目录 SVM:支持向量机简介基础准备1. 线性可分2. 最大间隔超平面3. 什么是支持向量?4. SVM 能解决哪些问题?5. 支持向量机的分类硬间隔 SVM0. 几何间隔与函数间隔1. SVM 最优化问题2. 对偶问题1. 拉格朗日乘数法 - 等式约束优化问题2. 拉格朗日乘数法 - …...

PostgreSQL 中的权限视图

PostgreSQL 中的权限视图 PostgreSQL 提供了多个系统视图来查询权限信息&#xff0c;虽然不像 Oracle 的 DBA_SYS_PRIVS 那样集中在一个视图中&#xff0c;但可以通过组合以下视图获取完整的系统权限信息。 一 主要权限相关视图 Oracle 视图PostgreSQL 对应视图描述DBA_SYS_…...

pnpm install报错:此系统上禁止运行脚本

依赖安装 报错信息&#xff1a; pnpm : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\pnpm.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 https:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policies。 所在位置 行:1 …...

解决yarn install 报错 error \node_modules\electron: Command failed.

在电脑重装系统后,重新安装项目依赖,遇到这一报错 完整报错信息如下: error D:\xxxxx\xxxxxx\node_modules\electron: Command failed. Exit code: 1 Command: node install.js Arguments: Directory: D:\xxxxx\xxxxx\node_modules\electron Output: HTTPError: Response cod…...

深度学习3.7 softmax回归的简洁实现

import torch from torch import nn from d2l import torch as d2lbatch_size 256 train_iter, test_iter d2l.load_data_fashion_mnist(batch_size)3.7.1 初始化模型参数 net nn.Sequential(nn.Flatten(), nn.Linear(784, 10))def init_weights(m):if type(m) nn.Linear:…...

Linux424 chage密码信息 gpasswd 附属组

https://chat.deepseek.com/a/chat/s/e55a5e85-de97-450d-a19e-2c48f6669234...

Spring Boot单元测试实战指南:从零到高效测试

在Spring Boot开发中&#xff0c;单元测试是保障代码质量的核心环节。本文将基于实际开发场景&#xff0c;手把手教你如何快速实现分层测试、模拟依赖、编写高效断言&#xff0c;并分享最佳实践&#xff01; 一、5分钟环境搭建 添加依赖 在pom.xml中引入spring-boot-starter-te…...

Netty线上如何做性能调优?

大家好&#xff0c;我是锋哥。今天分享关于【Netty线上如何做性能调优&#xff1f;】面试题。希望对大家有帮助&#xff1b; Netty线上如何做性能调优&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在使用 Netty 进行线上服务时&#xff0c;性能调优是…...

总结-SQL注入分类手法注入漏洞总结性分化说明

目录 关键要点 按参数类型分类 按提交方式分类 按反馈结果分类 其他高级注入类型 最新漏洞动态 防御措施 调查笔记&#xff1a;SQL注入类型与详细分析 一、按参数类型分类 二、按提交方式分类 三、按反馈结果分类 四、其他高级注入类型 五、最新漏洞动态 六、防御…...

Linux:进程的创建进程的终止

进程的创建 fork fork是c语言中的一个函数&#xff0c;用于创建新的子进程&#xff0c;它存放在<unistd.h>的头文件中 当我们运行程序时&#xff0c;如果使用了fork函数那么就会为这个进程创建一个它的子进程&#xff0c;这个子进程会继承父进程的所有数据和代码&…...

[C#]反射的实战应用,实际数据模拟

long? value null; // 看它是不是 HEX_STRING var dtAttr prop.GetCustomAttribute<DataTypeAttribute>(); if (dtAttr ! null && dtAttr.DataType DataType.HEX_STRING) {// 去掉可能的 "0x" 前缀string txt attribute.Value.StartsWith("0…...

机器人灵巧手有刷与无刷空心杯电机解析

一、电机结构分析 (一)有刷空心杯电机结构 有刷空心杯电机主要由上壳、碳刷、连接板、换向器线圈、外壳、轴承、永磁体、下壳及轴承密封圈组成。碳刷与换向器直接接触,负责传导电流,使线圈在永磁体产生的磁场中受力转动。这种机械换向方式虽直接,但碳刷磨损会影响电机寿命…...

JetBrains GoLang IDE无限重置试用期,适用最新2025版

注意本文仅用于学习使用&#xff01;&#xff01;&#xff01; 本文在重置2024.3.5版本亲测有效&#xff0c;环境为window(mac下应该也一样奏效) 之前eval-reset插件只能在比较低的版本才能起作用。 总结起来就一句&#xff1a;卸载重装&#xff0c;额外要删掉旧安装文件和注册…...

【网络应用程序设计】实验四:物联网监控系统

个人博客&#xff1a;https://alive0103.github.io/ 代码在GitHub&#xff1a;https://github.com/Alive0103/XDU-CS-lab 能点个Star就更好了&#xff0c;欢迎来逛逛哇~❣ 主播写的刚够满足基本功能&#xff0c;多有不足&#xff0c;仅供参考&#xff0c;还请提PR指正&#xff…...

第六章:安全最佳实践

Chapter 6: 安全最佳实践 &#x1f31f; 从上一章到本章 在第五章&#xff1a;框架/工具抽象中&#xff0c;我们学会了如何用框架快速搭建MCP服务器。现在想象这样一个场景&#xff1a;你的文件服务器已经开发完成&#xff0c;但突然发现恶意用户能通过路径遍历攻击访问系统文…...

最高支持高速L3商用,华为发布ADS 4智驾系统

作者 |张马也 编辑 |德新 4月22日&#xff0c;华为在上海召开乾崑智能技术大会。 会上&#xff0c;华为正式推出乾崑智驾ADS 4、鸿蒙座舱HarmonySpace 5、乾崑车控XMC数字底盘引擎等一系列智能汽车解决方案。 其中最为重磅的是&#xff0c;华为正式发布高速L3商用解决方案&a…...

[创业之路-382]:企业法务 - 企业如何通过技术专利与技术秘密保护自己

企业通过技术专利与技术秘密保护自身创新成果是构建核心竞争力的关键策略。以下从技术专利和技术秘密两大维度&#xff0c;系统阐述其保护路径及实施要点&#xff1a; 一、技术专利保护策略 1. 专利布局规划 核心专利&#xff1a;针对核心技术进行专利申请&#xff0c;构建基…...

多路转接epoll原理详解

目录 从epoll接口入手 创建epoll模型 用户告诉内核关心的事件 内核告诉用户就绪的事件 epoll的原理 整体思路 如何判断事件是否就绪 事件就绪后如何实现将节点插入就绪队列 从epoll接口入手 本篇文章从epoll的三个接口入手介绍epoll的具体工作原理 创建epoll模型 #in…...

基于 MCP用 Python 搭建 “大模型网关”在 MCP 服务器端聚合多个大模型的 API,将其统一为 MCP 协议接口

下面给出基于 MCP(Model-Connection-Protocol)设计思想,用 Python 搭建 “大模型网关” 的典型开发流程。整体思路是:在 MCP 服务器端聚合多个大模型的 API,将其统一为 MCP 协议接口;在客户端按需调用这些统一后的接口。总结如下: 概要: 需求与架构定位:Clarify 要接入…...

Linux的时间函数

ucos中有systick这个系统时间滴答&#xff0c;那linux中有没有这种系统时间滴答呢&#xff1f;有&#xff0c;jiffies&#xff0c;但是用户空间不可以使用。那么在linux中除了使用timer定时器进行定时&#xff0c;可以通过时间滴答的方式来进行粗略的计时吗&#xff1f;下面介绍…...