深入浅析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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
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
php 更新数据库中断的解决方法
2009/06/05 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
全国税务系统先进集体事迹材料
2014/05/19 职场文书
综合素质评价自我评价
2015/03/06 职场文书
整改通知书格式
2015/04/22 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
指导老师鉴定意见
2015/06/05 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
python实现批量移动文件
2021/04/05 Python
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript
Python中的变量与常量
2021/11/11 Python
MySQL优化及索引解析
2022/03/17 MySQL
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
bose降噪耳机音能消除人声吗
2022/04/19 数码科技