深入浅析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当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
vue跨域解决方法
Oct 15 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 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
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
用js实现计算加载页面所用的时间
2010/04/02 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
js document.write()使用介绍
2014/02/21 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
python距离测量的方法
2018/03/06 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
《雕塑之美》教学反思
2014/04/24 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
毕业生实习证明
2014/09/19 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
泰山导游词
2015/02/02 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
导游词之日月潭
2019/11/05 职场文书
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
Python字符串的转义字符
2022/04/07 Python
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL