详解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 EasyUI API 中文文档 - ComboTree组合树
Oct 11 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
bootstrap中的 form表单属性role="form"的作用详解
Jan 20 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
js数组去重的方法总结
Jan 18 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
vue如何搭建多页面多系统应用
Jun 17 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中使用xmlreader读取xml数据示例
2014/12/29 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
JS远程获取网页源代码实例
2013/09/05 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
2015/10/10 Javascript
原生js二级联动效果
2017/06/20 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
浅谈node.js 命令行工具(cli)
2018/05/10 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python中super函数的用法
2017/11/17 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
python 多个参数不为空校验方法
2019/02/14 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Django的models模型的具体使用
2019/07/15 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
构建高效课堂实施方案
2014/03/13 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
公司老总年会致辞
2015/07/30 职场文书
2019最新劳动仲裁申请书!
2019/07/08 职场文书
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS