[Props] vue组件间的传值及校验
基本用法
Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可
Vue.component('child', {
...
// 接收message
props: ['message']
...
})
- 由于HTML中的属性是不区分大小写的,所以当使用DOM中的模板(HTML中)时,驼峰写法需要转化为短横线写法。但是,如果使用字符串模板(JS中)时,不受限制,可以为所欲为。
Prop中的静态和动态值
- 在正常情况下,一般在父组件中通过v-bind定义一个动态值,子组件通过Prop接收该值,所以,很多人认为,Prop只能接收动态值。但是,其实Prop可以接受静态属性。
/* 父组件 */
<child type="video"></child>
/* 子组件 */
Vue.component('child', {
...
// 成功接收
props: ['type']
...
})
- 在示例中,父组件在子组件标签上定义了静态属性type,子组件依然通过Prop拿到了静态属性type。
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父组件的 Prop 的更新会向下流动到子组件中,但是反过来则不行。
这样会防止从子组件意外改变父组件以及同级子组件的状态,从而导致你的应用的数据流向难以理解。
- 另外,每次父组件发生更新时,子组件中所有的Prop都将刷新为最新的值。这意味着你不应该在子组件内部改变Prop,如果你这样做了,Vue会在控制台抛出一个警告。
一般来说,如果子组件需要操作Prop中的值,需要将Prop中的值赋值给本地定义的属性:
<div>
<p>{{newMessage}}</p>
</div>
...
props: ['message'],
computed:{
newMessage(){
return this.message;
}
}
...
非Prop特性
- 非Props特性是指在组件上定义了属性,而又没有使用Prop接受属性。此时,子组件内不可使用该属性值,该属性会直接添加到子组件的根节点上。
比如,在一个只含有一个div的子组件上,如果我向子组件传了一个content属性,但是子组件不使用Prop接收content属性,则渲染结果为:
<div id="root">
<div content="hello"></div>
</div>
Prop校验
- 子组件用Props接收父组件传来的消息有多种形式:
- 数组形式
props: [data1, data2]
数组形式相当于直接接收消息,不做任何校验,一般来说,不太建议使用数组形式。
2.简单对象形式
props: { data1: String, data2: Array}
简单对象形式对父组件传递的值进行了类型校验,如果传过来的值类型不一致,控制台会报错。
3.复杂对象形式
props: {
data1: {
type: String, //设定类型
required: true, //是否必须
default: 'default value', //默认值
validator (value) { return (value.length < 5) } }, //校验规则
data2: {
type: Array,
required: true,
default: () => ['', '', '']
}}
复杂对象形式的情况下,作为对象属性的参数可以写为对象形式,参数对象含有4个属性,
- type
- required
- default
- validator
type:设定参数类型,当传入参数类型与type不相符时,控制台会报错
required:设定参数是否是必传,当设为true时,不传该参数会报错
default:设定默认值,当参数类型为复杂类型时,需使用工厂模式生成默认值,否则Vue会在控制台抛出警告。如图所示,就通过工厂模式生成了一个长度为3的空数组。
validator:校验器,是一个函数,拥有一个代表传入值的形参,可以自定义各种校验,当返回false时,会报错,表示没通过校验。
【!】 注意那些 prop 会在一个组件实例创建之前进行验证,所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
类型检查
type 可以是下列原生构造函数中的一个:
String
Number
Boolean
Array
Object
Date
Function
Symbol
额外的,type 还可以是一个自定义的构造函数,并且通过 instanceof 来进行检查确认。
例如,给定下列现成的构造函数:
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
- 你可以使用:
Vue.component('blog-post', {
props: {
author: Person
}
})
- 来验证 author prop 的值是否是通过 new Person 创建的。
[Props] vue组件间的传值及校验的更多相关文章
- Vue 组件间的传值(通讯)
组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部,父组件给子组件传递一个标识,在子组件内部用props接收,子组件在模板里可以通过{{}} ...
- vue组件间的传值方式及方法调用汇总
1.传值 a.父组件传子组件 方法一: 父页面: <myReportContent v-if="contentState==1" :paramsProps='paramsPr ...
- Vue 组件间传值
前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件间通信六种方式(完整版)
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- react组件间的传值方法
关于react的几个网站: http://react.css88.com/ 小书:http://huziketang.mangojuice.top/books/react/ http://www.re ...
- Vue组件间通信-Vuex
上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
随机推荐
- js进行MD5加密(含中文),与后台JAVA加密之后结果不同(解决)
开发小程序过程中与后台进行接口沟通,前期接口经过MD5加密和AES加密之后,后台进行解密. 今天出现一种情况,我前台加密之后的md5串与后台加密不同,后台发现可能是带用中文的原因, 这是加密之前的串: ...
- 【java编程】vo、po、dto、bo、pojo、entity、mode如何区分
Java Bean:一种可重用组件,即“一次编写,任何地方执行,任何地方重用”.满足三个条件 类必须是具体的和公共的 具有无参构造器 提供一致性设计模式的公共方法将内部域或暴露成员属性 VO valu ...
- zookeeper生产最广泛使用java客户端curator介绍及其它客户端比较
关于zookeeper的原理解析,可以参见zookeeper核心原理详解,本文所述大多数实践基于对zookeeper原理的首先理解. Curator是Netflix公司开源的一个Zookeeper客户 ...
- Debian 9安装java与设置环境变量
安装默认JRE / JDK 先更新软件包索引: apt update 检查是否已安装Java: java -version 如果当前未安装Java,您将看到以下输出: Output-bash: jav ...
- Spring Web Flux 相关概念
Reactive Streams.Reactor 和 Web Flux 上面介绍了反应式编程的一些概念,以及 Reactor 和 Web Flux.可能读者看到这里有些乱.这里介绍一下三者的关系.其实 ...
- BicycleGAN: Toward Multimodal Image-to-Image Translation - 1 - 论文学习,成对数据
Abstract 许多图像到图像的翻译问题是有歧义的,因为一个输入图像可能对应多个可能的输出.在这项工作中,我们的目标是在一个条件生成模型设置中建立可能的输出分布.将模糊度提取到一个低维潜在向量中,在 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:接口调用获取实时信息
背景分析 熟悉EasyNVR产品的小伙伴应该知道,EasyNVR主要针对的是安防类的项目,通过RTSP/onvif协议将前端高清网络摄像机IPC.NVR等接入进来,然后将设备端的音视频通过采集.转换, ...
- docker: 构建自己的镜像
我们给予ubuntu的镜像然后拷贝python的requirement.txt文件进去,再根据这个文件安装对应的python库 拷贝文件到docker容器.首先查找对应的容器ID.然后执行命令 doc ...
- [转]Mathjax语法总结
链接地址:https://blog.csdn.net/ajacker/article/details/80301378
- 转 java 8 lamba stream
一直在写中间件相关的代码,提供SDK给业务方使用,但很多业务方还一直停留在1.7版本,迟迟不升级,为了兼容性,不敢在代码中使用Java8的一些新特性,比如Stream之类的,虽然不能用,但还是要学一下 ...