深入浅析Vue中的Prop


Posted in Javascript onJune 10, 2018

Prop

基本用法

Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可

Vue.component('child', {
 ...
 // 接收message
 props: ['message']
 ...
})

tips:由于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中的值赋值给本地定义的属性:

...
props: ['message'],
data () {
 return {
  mes: this.message
 }
}
...

非Prop特性

非Props特性是指在组件上定义了属性,而又没有使用Prop接受属性。此时,子组件内不可使用该属性值,该属性会直接添加到子组件的根节点上。

比如,在一个只含有一个div的子组件上,如果我向子组件传了一个content属性,但是子组件不使用Prop接收content属性,则渲染结果为:

<div id="root">
  <div content="hello"></div>
</div>

Prop校验

子组件用Props接收父组件传来的消息有多种形式:

1.数组形式

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时,会报错,表示没通过校验。

Javascript 相关文章推荐
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 #Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 #Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 #Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 #Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 #jQuery
JS实现区分中英文并统计字符个数的方法示例
Jun 09 #Javascript
详解angular脏检查原理及伪代码实现
Jun 08 #Javascript
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP中的超全局变量
2006/10/09 PHP
同时提取多条新闻中的文本一例
2006/10/09 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
浅谈Python 对象内存占用
2016/07/15 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
python实现flappy bird游戏
2018/12/24 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
python中安装django模块的方法
2020/03/12 Python
判断Threading.start新线程是否执行完毕的实例
2020/05/02 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
高三地理教学反思
2014/01/11 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
小学体育课教学反思
2016/02/16 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
MySQL如何使备份得数据保持一致
2022/05/02 MySQL