4-3 组件参数校验与非props特性
本文参考脚本之家,https://www.jb51.net/article/143466.htm
通过属性的形式,父组件对子组件进行参数的传递 //如下图:
//父组件设置content属性,向属性中传值(第12行代码)。子组件用props方法接收传递过来的content属性(第16行代码)
组件参数校验:父组件向子组件传递的内容,子组件有权对这个内容进行约束,这些参数可以称之为参数校验
我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。
//如下,对第一个例子的代码进行了修改,我们把子组件中的props属性,改为一种对象的形式,而且我们也约束了父组件传递过来的content为String类型(第16-17行代码)
//页面显示效果依然不变。
==================================================
//当改变了父组件中content的值等于1,那么我们就很自然的把content理解为数字类型。其实不然,因为下面content所表示的是String类型,所以‘1’会被当成字符串来表示。
==================================================
//在vue中,默认传递的值都是字符串,如果你想要传递一个数字,那么必须在content前面添加一个引号(:)来表示:
//但是,当添加了引号(:)后,页面出现报错现象: (即类型检测有问题!!!)
//原因是我们的content类型选择的是String类型,只要把String改为Number就好了。如下: 这样页面就不会出现报错了
==================================================
//当然了,content也是可以接受一个数组的,用来判断它父组件为子组件传递的多个参数。
//如下图:把content属性修改为Number和String类型后,这样,不管content传递的值是数字还是字符串,页面都不会出现报错
==================================================
//除了数组形式,我们也可以写成对象的形式。那么对象的形式,vue为我们提供了各种可选的参数。
==================================================
props特性:
①父组件传值,子组件接收,然后在组件中可以直接使用父组件传递过来的数据(如上图,第12,29行代码)
②同时不会把属性(例如:content=‘hello world’)显示在DOM的标签之中
非props特性:
①父组件传值,子组件不接收,那么在子组件中就没办法使用父组件传递过来的数据
②同时,非props特性对应的属性值其实会显示在子组件的最外层标签的html属性之中 【实际中,非props使用的场景并不是特别多,了解即可】
如图:
//代码如下: (把props给注释了,就是非props特性了)
//显示的就是非props特性的结果 (content中的内容不会显示出来,而且html代码中div标签有显示content属性出来,而且会出现报错现象)
转载于:https://www.cnblogs.com/ytraister/p/10611166.html
4-3 组件参数校验与非props特性相关推荐
- Vue学习小札——2.6 组件参数校验与非props特性
<div id="app"><child content="{'a':1}"></child></div>< ...
- vue.js踩坑之组件参数检验与非props特性
vue组件参数检验与非props特性 学前疑问: 什么是组件参数检验? 组件参数校验都有哪些属性设置?分别表示什么意思? 什么是props特性?何为非props特性?如何判断? 重要代码讲解如下: 父 ...
- 六十一、Vue中父子组件传值和组件参数校验
@Author:Runsen @Date:2020/10/17 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的日积月累,需要强大 ...
- VUE之组件(Props特性深析)
Prop命名风格 [前言] 创建一个博文组件,如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的,这也正是 prop 的由来. Prop 是你可以在组件上注册 ...
- vue_组件_非prop特性
非prop特性指的是,一个未被组件注册的特性.当组件接收了一个非prop特性时,该特性会被添加到这个组件的根元素上. 1.替换/合并已有的特性 对于绝大多数特性来说,从外部供给组件的值会替换掉组件内部 ...
- props特性的深入了解
Prop命名风格 (1)Prop 的命名风格 ①PascalCase首字母大写命名即大驼峰法 ②camelCase 小驼峰命名法 ③kebab-case 短横线分隔命名法 注意: HTML 中的特性是 ...
- vue2知识点:组件的props属性、非props属性、props属性校验
文章目录 3.10props属性 举例:父组件给子组件传递属性msg和greetText,子组件用属性a和b接收,并打印输出 3.11props校验 举例 3.12非props属性 举例:定义子组件设 ...
- SpringBoot实现通用的接口参数校验
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料 作者:cipher juejin.im/post/5af3c25b ...
- java 接口参数验证_SpringBoot实现通用的接口参数校验
作者:cipher 来源:http://39sd.cn/560BA 本文介绍基于Spring Boot和JDK8编写一个AOP,结合自定义注解实现通用的接口参数校验. 缘由 目前参数校验常用的方法是在 ...
最新文章
- WIN7 64位系统下,右下角的声音和电源图标不见的解决办法
- 用不惯VMware?试试这款更轻量级的虚拟机!
- EJB-Java服务器端构件模型使用入门(2)
- 东方通 中间件_东方通:中间件国产替代进程中的艰难领军者
- python 断点调试 pdb
- Java当中编码和解码(以及出现乱编码的原因)
- 安装Veritas Backup Exec v20.3
- vs2015c 语言包,有关Visual Studio 2015 中文语言包 无法下载
- Android 设置客户端支持的TLS支持的版本号
- 快手调整员工福利,​减少房补,增加生育津贴;百度网盘青春版正式上线,被吐槽;雷军回应小米对标苹果遭冷嘲热讽 | EA周报...
- Android 最新实现沉浸式状态栏的效果
- python tkinter画福字
- 【量化笔记】Markowitz均值-方差模型
- 猪大肠怎么清洗才干净无异味
- 爬虫基本库之request
- 回溯法 n皇后 python 解法一
- Codeforces Round #375 (Div. 2) B. Text Document Analysis(字符串处理,简单题目)
- 关于Tushare库的使用
- CAD安装与经典模式设置
- mysql比较两个数函数_mysql函数之比较函数(2)
热门文章
- 安装centos7步骤_Centos7下源码编译安装mysql5.7 详细步骤 小白也能安装
- 如何快速学Web前端开发?JavaScript函数好学吗?
- 自定义类型详解:结构体(内存对齐、位段) + 枚举 + 联合
- html源码蔡,html基础代码详解
- threejs加载obj模型_倾斜摄影三维模型几种常见的格式,你能说出哪些?
- linux 移动一行到指定行,linux – 移动行以跟随文件中的另一行
- java编写人机聊天_无聊 写了个人机对话的小程序 哈哈!
- ocx控件 postmessage消息会消失_通过HackerOne漏洞报告学习PostMessage漏洞实战场景中的利用与绕过...
- phalcon + nginx 混合模式配置
- html页面加载动画尺寸,6种CSS3加载动画