详解Vue内部怎样处理props选项的多种写法


Posted in Javascript onNovember 06, 2018

开发过程中,props 的使用有两种写法:

// 字符串数组写法
const subComponent = {
 props: ['name']
}
// 对象写法
const subComponent = {
 props: {
  name: {
   type: String,
   default: 'Kobe Bryant'
  }
 }
}

Vue在内部会对 props 选项进行处理,无论开发时使用了哪种语法,Vue都会将其规范化为对象的形式。具体规范方式见Vue源码 src/core/util/options.js 文件中的 normalizeProps 函数:

/**
 * Ensure all props option syntax are normalized into the
 * Object-based format.(确保将所有props选项语法规范为基于对象的格式)
 */
 // 参数的写法为 flow(https://flow.org/) 语法
function normalizeProps (options: Object, vm: ?Component) {
 const props = options.props
 // 如果选项中没有props,那么直接return
 if (!props) return
 // 如果有,开始对其规范化
 // 声明res,用于保存规范化后的结果
 const res = {}
 let i, val, name
 if (Array.isArray(props)) {
  // 使用字符串数组的情况
  i = props.length
  // 使用while循环遍历该字符串数组
  while (i--) {
   val = props[i]
   if (typeof val === 'string') {
    // props数组中的元素为字符串的情况
    // camelize方法位于 src/shared/util.js 文件中,用于将中横线转为驼峰
    name = camelize(val)
    res[name] = { type: null }
   } else if (process.env.NODE_ENV !== 'production') {
    // props数组中的元素不为字符串的情况,在非生产环境下给予警告
    // warn方法位于 src/core/util/debug.js 文件中
    warn('props must be strings when using array syntax.')
   }
  }
 } else if (isPlainObject(props)) {
  // 使用对象的情况(注)
  // isPlainObject方法位于 src/shared/util.js 文件中,用于判断是否为普通对象
  for (const key in props) {
   val = props[key]
   name = camelize(key)
   // 使用for in循环对props每一个键的值进行判断,如果是普通对象就直接使用,否则将其作为type的值
   res[name] = isPlainObject(val)
    ? val
    : { type: val }
  }
 } else if (process.env.NODE_ENV !== 'production') {
  // 使用了props选项,但它的值既不是字符串数组,又不是对象的情况
  // toRawType方法位于 src/shared/util.js 文件中,用于判断真实的数据类型
  warn(
   `Invalid value for option "props": expected an Array or an Object, ` +
   `but got ${toRawType(props)}.`,
   vm
  )
 }
 options.props = res
}

如此一来,假如我的 props 是一个字符串数组:

props: ["team"]

经过这个函数之后,props 将被规范为:

props: {
 team:{
  type: null
 }
}

假如我的 props 是一个对象:

props: {
 name: String,
 height: {
  type: Number,
  default: 198
 }
}

经过这个函数之后,将被规范化为:

props: {
 name: {
  type: String
 },
 height: {
  type: Number,
  default: 198
 }
}

注:对象的写法也分为以下两种,故仍需进行规范化

props: {
 // 第一种写法,直接写类型
 name: String,
 // 第二种写法,写对象
 name: {
  type: String,
  default: 'Kobe Bryant'
 }
}

最终会被规范为第二种写法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的12招常用技巧分享
Aug 08 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
微信小程序的授权实现过程解析
Aug 02 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
微信小程序实现选项卡效果
Nov 06 #Javascript
Vue props 单向数据流的实现
Nov 06 #Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 #Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 #Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 #Javascript
vue项目上传Github预览的实现示例
Nov 06 #Javascript
React Component存在的几种形式详解
Nov 06 #Javascript
You might like
php 页面执行时间计算代码
2008/12/04 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
js表单验证实例讲解
2016/03/31 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
解决vux 中popup 组件Mask 遮罩在最上层的问题
2020/11/03 Javascript
python采集博客中上传的QQ截图文件
2014/07/18 Python
python数据结构之链表的实例讲解
2017/07/25 Python
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
python计算日期之间的放假日期
2018/06/05 Python
python实现的Iou与Giou代码
2020/01/18 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
党风廉政承诺书
2014/03/27 职场文书
促销活动总结模板
2014/07/01 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
感恩父母主题班会
2015/08/12 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
apache基于端口创建虚拟主机的示例
2021/04/24 Servers