【Vue2.x】props技术详解

1.什么是prop?

  • 定义:组件标签上注册的一些自定义属性
  • 作用:向子组件传递数据
  • 特点
  1. 可以传递任意数量的prop
  2. 可以传递任意类型的prop

2.prop校验

为了避免乱传数据,需要进行校验

完整写法 

将之前props数组的写法,改为对象的写法

值得注意的是这个非空校验,指的是万一忘记传值(忘了在标签中写自定义属性)

仅类型校验(最常用)


prop & data的异同点

共同点:都可以给组件提供数据

区别:

  • data的数据是自己的 ->   想咋改咋改
  • prop的数据是外部的 ->   不能直接改,要遵循 单向数据流

案例:加减器
 

数据count是父组件的,子组件的加减按钮的功能不能直接count++ count--了,需要子传父的写法

  • App.vue 
<template><div class="app"><BaseCount :Count="count" @CountAdd="CountAdd" @CountSub="CountSub"></BaseCount></div>
</template><script>
import BaseCount from "./components/BaseCount.vue"
export default {components: {BaseCount,},data() {return {count: 999,}},methods: {CountAdd(newCount){this.count = newCount;},CountSub(newCount){this.count = newCount;},}
}
</script><style></style>
  • BaseCount.vue
<template><div class="base-count"><button @click="requestSub">-</button><span>{{ Count }}</span><button @click="requestAdd">+</button></div>
</template><script>
export default {props: {Count: Number,},methods: {requestSub() {this.$emit('CountSub',this.Count - 1);},requestAdd() {this.$emit('CountAdd',this.Count + 1);}}
}
</script><style></style>
单向数据流

由上面案例可以得出,父组件的prop数据的更新,会单向向下流动,影响到子组件

 

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

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

相关文章

【SQL Server001】SQLServer2016常用函数实战总结(已更新)

1.熟悉、梳理、总结下SQL Server相关知识体系。 2.日常研发过程中使用较少&#xff0c;随着时间的推移&#xff0c;很快就忘得一干二净&#xff0c;所以梳理总结下&#xff0c;以备日常使用参考 3.欢迎批评指正&#xff0c;跪谢一键三连&#xff01; 总结源文件资源下载地址&am…

鸿蒙应用开发系列 篇六:鸿蒙系统应用生态与发布、推广

文章目录 系列文章开发过程的准备发布应用分发AGC发布应用(APK)应用资质审核要求发布HarmonyOS应用应用资质审核要求鸿蒙生态推广与变现系列文章 鸿蒙应用开发系列 篇一:鸿蒙系统概述 鸿蒙应用开发系列 篇二:鸿蒙系统开发工具与环境

Ubuntu切换内核版本

#安装内核安装工具 sudo apt-get install software-properties-common sudo add-apt-repository ppa:cappelikan/ppa sudo apt-get update sudo apt-get install mainline#安装指定内核版本(有些版本并不能安装成功) mainline install 5.14.10#更新GRUB配置 sudo update-grub#查…

如何查看CO凭证号码及明细

如何查看CO凭证号码及明细: 1)原始凭证上点菜单栏上的“环境”,选择“会计核算凭证”,控制凭证就是CO的凭证号码. 2)KSB5 查看CO凭证明细, 3)FB03处查看原始凭证&#xff0c;选菜单上环境--会计核算--控制凭证. CO凭证相关的主要表&#xff1a;COBK&#xff08;凭证头&#xff…

PE文件(六)新增节-添加代码

本节的目的是在所有节的空白区都不够存放我们要添加的代码时&#xff0c;教会我们新增一个足够大的节来添加代码 添加节 一.判断是否有足够的空间可以添加一个节表&#xff1a;新增节需要新增一个节表来记录此节信息 判断方法&#xff1a;SizeOfHeader - (DOS 垃圾数据 PE…

java常见算法

这里写目录标题 1.二分查询法2.冒泡排序算法3.快速查询算法 1.二分查询法 要求待查询的序列是有序数列, 每个取中间位置的值与目标值进行比较 如果目标值 > 中间位置, 目标值在右部分, 起始索引更新为mid 1如果目标值 中间位置, 则直接返回如果目标值 < 中间位置, 目…

全网最全爬取-b站爬取弹幕+评论之js逆向与xml降本增效

&#x1f31f; ❤️ 作者&#xff1a;yueji0j1anke 首发于公号&#xff1a;剑客古月的安全屋 字数&#xff1a;801 阅读时间: 10min 声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及…

【C语言深度解剖】(14):结构体内存对齐(详细配图讲解)

&#x1f921;博客主页&#xff1a;醉竺 &#x1f970;本文专栏&#xff1a;《C语言深度解剖》 &#x1f63b;欢迎关注&#xff1a;感谢大家的点赞评论关注&#xff0c;祝您学有所成&#xff01; ✨✨&#x1f49c;&#x1f49b;想要学习更多C语言深度解剖点击专栏链接查看&…

只有题目和摘要,能匹配到适合发发表的期刊吗

美国时间5月20日更新的Journal List中&#xff0c;SCIE期刊数据库剔除(Dropped)或停止检索(Ceased)了这2本期刊&#xff01;我们整理了期刊的详细信息供大家参考&#xff01; 01《EUROPEAN REVIEW FOR MEDICAL AND PHARMACOLOGICAL SCIENCES》 ISSN&#xff1a;1128-3602 出…

椋鸟C++笔记#3:类的默认成员函数

文章目录 类的默认成员函数构造函数&#xff08;Constructor&#xff09;构造函数的特点 析构函数 &#xff08;Destructor&#xff09;析构函数的特点 拷贝构造函数&#xff08;Copy Constructor&#xff09;拷贝构造函数的特点 运算符重载&#xff08;Operator Overloading&a…

Java中关于infinity的解释

在Java中&#xff0c;Infinity 不是一个直接的关键字或常量&#xff0c;但它是浮点数&#xff08;float 和 double&#xff09;可以表示的一个特殊值。具体来说&#xff0c;Infinity 通常与两个特殊的浮点值相关联&#xff1a;正无穷大 (POSITIVE_INFINITY) 和负无穷大 (NEGATI…

Java编程注释教程

在Java SE&#xff08;Standard Edition&#xff09;中&#xff0c;注释是用于解释说明程序的文字&#xff0c;它们不会影响程序的执行&#xff0c;但可以提高程序的可读性和可维护性。Java SE支持三种类型的注释&#xff1a; 单行注释&#xff1a; 使用两个斜杠&#xff08;/…

缩进在编程中的重要性及正确使用方法

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 前言 缩进不当引发的问题 缩进的正确使用方法 缩进错误的调试与修复 总结 前言 在编程世…

Unity 资源 之 限时免费的Lowpoly农场动物,等你来领!

Unity资源 之 Lowpoly farm animals 农村动物 前言资源包内容领取兑换码 前言 Unity 资源商店为大家带来了一份特别的惊喜——限时免费的农场动物资源&#xff01;这是一个充满趣味和实用性的资源包。 资源包内容 在这个资源包中&#xff0c;你可以找到丰富多样的低地养殖动物…

Vue3路由配置

路由其实就是一组对应关系&#xff0c;将一个路径与一个组件对应起来&#xff0c;当路径发生变化&#xff0c;路由器就可以通过路由规则&#xff0c;找到当前路径对应的组件&#xff0c;并将该组件呈现到页面上 使用路由步骤&#xff1a; 1.终端输入 npm i vue-router 2.在App…

UDP网络聊天室

前言 基于UDP的网络聊天室 一、项目需求 如果有用户登录&#xff0c;其他用户可以收到这个人的登录信息如果有人发送信息&#xff0c;其他用户可以收到这个人的群聊信息如果有人下线&#xff0c;其他用户可以收到这个人的下线信息服务器可以发送系统信息 二、步骤 1.创建UD…

Softing工业将亮相2024年阿赫玛展会——提供过程自动化的连接解决方案

您可于2024年6月10日至14日前往美因河畔法兰克福11.0号馆&#xff0c;Softing将在C25展位展出&#xff0c;欢迎莅临&#xff01; 作为工业应用中数据交换领域公认的专家&#xff0c;Softing工业致力于帮助各行各业的客户部署网络自动化和优化生产流程。 使用Softing产品&…

mybatis plus 配置多数据源(数据源进行切换)

多数据源(数据源进行切换) AbstractRoutingDataSource 根据用户定义的规则选择当前的数据源&#xff0c;这样我们可以在执行查询之前&#xff0c;设置使用的数据源。实现可动态路由的数据源&#xff0c;在每次数据库查询操作前执行。它的抽象方法 determineCurrentLookupKey()…

如何在OpenHarmony上使用SeetaFace2人脸识别库?

简介 相信大部分同学们都已了解或接触过OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09;了&#xff0c;但你一定没在OpenHarmony上实现过人脸识别功能&#xff0c;跟着本文带你快速在OpenHarmony标准设备上基于SeetaFace2和OpenCV实现人脸识别。 项目效…

【Vue】Vue2路由

目录 路由作用Vue Router路由Vue Router路由的组成VueRouter常用的函数Vue Router的使用安装Vue Router创建router引入router使用 备注 Vue多级路由&#xff08;嵌套路由&#xff09;编写组件配置嵌套路由 Vue中的动态路由代码示例父组件Home.vue子组件路由配置 路由的 query 参…