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

【Uniapp-Vue3】在组件中通过props进行数据传递

我现在有user-header一个组件,里面有一个头像和一个名称:

我们在index.vue中使用三次该组件:

我们现在要给这三个<user-header></user-header>进行传值,使他们根据传入值来显示头像和名称。

一、index.vue传值

<标签名 传值变量1="值1" 传值变量2="值2"></标签名>

也可以传入响应式变量(传值变量前需要加冒号):

 二、user-head.vue接收值

defineProps(['传值变量1', '传值变量2']);

效果展示:

 

我们不能直接对props进行修改!

但是我们可以先接收props的值,再对值进行修改,如我现在需要给每个名称前面加上一个"@":


http://www.kler.cn/a/488732.html

相关文章:

  • vscode支持ssh远程开发
  • Kubernetes Gateway API-5-后端协议和网关基础设置标签
  • 6 分布式限流框架
  • 计算机网络(三)——局域网和广域网
  • 代码随想录算法训练营day23
  • 高等数学学习笔记 ☞ 一元函数微分的基础知识
  • Vue.js 组件开发:从基础到进阶
  • 蓝桥杯嵌入式速通(1)
  • Java的 BIO、NIO、AIO?分别的作用和用法
  • YCM托管YashanDB报错 /home/yashan/.yasboot/.env is not existed
  • Github 2025-01-08 C开源项目日报 Top10
  • 青少年编程与数学 02-006 前端开发框架VUE 13课题、事件处理
  • 2012mfc,自绘列表控件
  • 【Linux】Linux常见指令(上)
  • RK3588上CPU和GPU算力以及opencv resize的性能对比测试
  • RabbitMQ基础(简单易懂)
  • 协同过滤算法私人诊所系统|Java|SpringBoot|VUE|
  • 2025年01月07日Github流行趋势
  • spring task使用
  • STM32: 默认开启ADC中断
  • 记录IDEA与maven兼容版本
  • 升级 Spring Boot 3 全项目讲解 — 给项目增加聊天对话功能
  • 汽车基础软件AutoSAR自学攻略(三)-AutoSAR CP分层架构(2)
  • 如何在 Linux、MacOS 以及 Windows 中打开控制面板
  • ue5玩家角色添加武器。切换武器位置,手上武器放到背上。演示一下人体插槽和武器的连接。仅仅演示,实际项目不是这么用的
  • IT行业的发展趋势