详解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 相关文章推荐
Javascript模板技术
Apr 27 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
js实现右键自定义菜单
Dec 03 Javascript
axios基本入门用法教程
Mar 25 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
layui的table中显示图片方法
Aug 17 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 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加密解密的代码
2006/10/09 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
p5.js入门教程之图片加载
2018/03/20 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
以windows service方式运行Python程序的方法
2015/06/03 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python从零开始创建区块链
2018/03/06 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python 实用工具状态机transitions
2020/11/21 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
护士毕业实习感言
2014/03/05 职场文书
合作协议书模板
2014/10/10 职场文书
辞职信如何写
2015/02/27 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python