VUE-组件间通信(一)props

news2025/1/21 22:01:33

props
1、单向绑定
props是父组件给子组件传输数据
当父组件的属性变化时,将传导给子组件,但是反过来不会
2、使用示例
子组件(类似于方法)

<template>
<div>
    <h2>姓名:{{ name }}</h2>
    <h2>性别:{{ sex }}</h2>
    <h2>年纪:{{ age }}</h2>
</div>
</template>
<script>
export default{
    name:'StudentInfo',
    data(){
        return {
            msg:"我是一个学生"
        }
    },
    //外部传进来的东西
    //声明参数类型
    props:{
         name:String,
         sex:String,
         age:Number
     }
}
</script>

父组件(调用)

<template>
  <div>
   <StudentInfo name="李四" sex="男" age="18"></StudentInfo>
  </div>
</template>

<script>
import StudentInfo from './components/StudentInfo'

export default {
  name: 'App',
  components: {StudentInfo}
}
</script>

浏览器页面
3、总结:
父组件传递数据,子组件接收数据,子组件不可修改数据,只能展示。

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

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

相关文章

微信小程序接口请求出错:request:fail url not in domain list:xxxxx

一、微信小程序后台和开发者工具配的不一样导致了这个错误 先说结论&#xff1a; 开发者工具配置了https://www.xxx.cn/prod-api/ 微信后台配置了 https://www.xxx.cn 一、最开始 开发者工具配置了https://www.xxx.cn:7500 微信后台配置了 https://www.xxx.cn 报错:reques…

面试六分钟,难题显真章

职场&#xff0c;这个充满机遇与挑战的舞台&#xff0c;总会在不经意间上演着意想不到的转折。我从一家小公司转投到另一家&#xff0c;原本期待着新的工作环境和更多的发展机会&#xff0c;然而现实却给了我一个不小的打击。 新公司的加班文化&#xff0c;如同一个巨大的漩涡…

yolov7 gui 轻松通过GUI来实现YOLOv7对象检测

YOLOv7 GUI 是一款用户友好型图形界面应用程序&#xff0c;专为简化基于YOLOv7&#xff08;You Only Look Once version 7&#xff09;的目标检测流程而设计。该工具允许用户无需深入掌握命令行操作和复杂编程细节&#xff0c;即可方便快捷地运行YOLOv7模型来检测图像或视频中的…

3.19总结

A计划 题解&#xff1a;这题其实就是一个很简单的三维搜索&#xff0c;有了一个传送门&#xff0c;并且要确定是否传过去的对应位置是墙&#xff0c;防止被装死&#xff0c;同事呢又要在对应的t时间内完成&#xff08;不一定要卡着t时间恰好完成&#xff09; #include<ios…

【项目实践day06】JWT令牌相关

什么是JWT 简洁的、自包含的格式&#xff0c;用于在通信双方以json数据格式安全的传输信息。 由于数字签名的存在&#xff0c;这些信息是可靠的。 jwt就是将原始的json数据格式进行了安全的封装&#xff0c;这样就可以直接基于jwt在通信双方安全的进行信息传输了。简洁&#…

全栈的自我修养 ———— 让uniapp开发更加舒服!!(与别的博主思路不一样,小编这里只讲实用的,直提重点!)

小编是web的&#xff0c;然后现在开始接手微信小程序&#xff0c;有很多不习惯的的地方&#xff0c;经过一段时间的使用&#xff0c;部分得到了妥善的解决方法 一、用vscode开发小程序二、组件库的选择三、注意 一、用vscode开发小程序 发现用Hbuilder开发小程序有很多不习惯的…

odoo17开发教程(8):设置界面UI的字段属性

目录 添加字段 给字段设置只读和不可拷贝 给字段添加默认值 保留字段 本节目标&#xff1a;在本文末尾&#xff0c;售价(selling price)应为只读值&#xff0c;卧室数量(bedrooms)和可用日期(availability date)应为默认值。此外&#xff0c;在复制记录时&#xff0c;售价和…

day09-Mybatis

一、Mybatis 基础操作 1 需求 功能列表&#xff1a; 查询 根据主键ID查询 条件查询新增更新删除 根据主键ID删除 根据主键ID批量删除 2 准备 实施前的准备工作&#xff1a; 准备数据库表创建一个新的 springboot 工程&#xff0c;选择引入对应的起步依赖&#xff08;mybatis、…

【DevOps趣味篇】你为什么要数程序员的代码行数?

【DevOps趣味篇】你为什么要数程序员的代码行数&#xff1f; 目录 【DevOps趣味篇】你为什么要数程序员的代码行数&#xff1f;代码行数统计方法手动计数代码行数统计命令使用语句统计代码行数IL指令 需要计算代码行数吗&#xff1f; 推荐超级课程&#xff1a; Docker快速入门…

「Swift」AttributedString常见使用方法

前言&#xff1a;AttributedString是Apple推出的可以实现单个字符或字符范围带相应属性的字符串。属性提供了一些文本特性&#xff0c;可以让文本展示的样式更加丰富。在日常开发过程中&#xff0c;我通常用于同一个Label中包含不同的字体大小或字体颜色的样式编写中。 使用举…

002——编译鸿蒙(Liteos -a)

目录 一、鸿蒙是什么 二、Kconfig 2.1 概述 2.2 编译器 2.3 make使用 本文章引用了很多韦东山老师的教程内容&#xff0c;算是我学习过程中的笔记吧。如果侵权请联系我。 一、鸿蒙是什么 这里我补充一下对鸿蒙的描述 这张图片是鸿蒙发布时使用的&#xff0c;鸿蒙是一个很…

数据预处理:重复值

数据重复值处理 数据重复值出现情况重复的记录用于分析演变规律重复的记录用于样本不均衡处理重复的记录用于检测业务规则问题 数据重复值出现情况 数据集中的重复值包括以下两种情况&#xff1a; 数据值完全相同的多条数据记录。这是最常见的数据重复情况。数据主体相同但匹…

ConKI: Contrastive Knowledge Injection for Multimodal Sentiment Analysis

文章目录 ConKI&#xff1a;用于多模态情感分析的对比知识注入文章信息研究目的研究内容研究方法1.总体结构2.Encoding with Knowledge Injection2.1 Pan-knowledge representations2.2 Knowledge-specific representations 3.Hierarchical Contrastive Learning4.损失函数5.训…

五个跟进方法,让你的老外客户不再跑路!

一、不同客户该怎么跟进? 1.已报价的客户 在向客户报过价之后&#xff0c;过几天要记得再询问一下对方是否收到了报价&#xff0c;如果没收到就提醒一下客户必要时将价格再发过去&#xff0c;如果客户已收到还要再进一步了解其对于报价的想法。 如果客户有兴趣也有需要&…

外包2月,技术倒退警钟长鸣。。。。。

曾经的我&#xff0c;作为一名大专生&#xff0c;在湖南某软件公司从事功能测试工作近四年。日复一日的工作让我陷入舒适区&#xff0c;不思进取。直到今年8月&#xff0c;我才意识到自己的技术停滞不前&#xff0c;女友的离开更是让我痛定思痛&#xff0c;决定改变现状&#x…

如何选择合适的奶瓶?五大超实用选购技巧,新手宝妈必看

奶瓶什么品牌好&#xff1f;奶瓶是每个新生宝宝都需要用到的辅喂产品&#xff0c;然而市场上许多网红品牌为了赚快钱&#xff0c;往往凭借外观设计、性价比和广告营销来吸引消费者。这些品牌由于缺乏专业技术&#xff0c;往往没有对选材用料和安全性进一步的优化&#xff0c;从…

使用jQuery的autocomplete实现数据查询一次,联想自动补全

书接上回&#xff0c;上次说到在jsp页面中&#xff0c;通过监听输入框的数值变化&#xff0c;实时查询数据库&#xff0c;得到返回值使用autocomplete属性自动补全&#xff0c;实现一个联想补全辅助操作&#xff0c;链接&#xff1a;使用jquery的autocomplete属性实现联想补全操…

Redis数据结构对象中的类型检查与命令多态、内存回收

类型检查与命令多态 概述 redis中用于操作键的命令基本上可以分为两种类型。其中一种命令可以对任何类型的键执行&#xff0c;比如说DEL命令、EXPIRE命令、RENAME命令、TYPE命令、OBJECT命令等. 而另一种命令只能对特定类型的键执行&#xff0c;比如说 1.SET、GET、APPEND、…

Vector Magic:矢量图像转换神器,轻松驾驭Mac与Win双平台

在数字化时代&#xff0c;图像已经成为我们生活和工作中不可或缺的一部分。无论是设计师、艺术家&#xff0c;还是普通用户&#xff0c;都对图像质量有着极高的要求。而矢量图像&#xff0c;以其清晰度高、可无限放大的特点&#xff0c;逐渐受到广大用户的青睐。今天&#xff0…

打破沟通壁垒:跨部门需求冲击与IT部门的应对智慧

引言 在快节奏、高要求的互联网行业&#xff0c;跨部门间的有效沟通是确保项目顺利进行和公司业务稳定发展的基石。然而&#xff0c;需求突袭往往成为打乱这一稳定局面的重要因素。 事件的背景 作为一IT部门负责人&#xff0c;在跨部门的领导层沟通会议上&#xff0c;一个在事…