如何在vue中使用道具

　　介绍

今天就跟大家聊聊有关如何在vue中使用道具,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强> 1。数组形式

道具:,(& # 39;名字# 39;,,& # 39;价值# 39;]

<强> 2。对象形式

对象形式内部也提供了三种写法:

道具:,{ 　　,//基础的类型检查 　　,名字:字符串, 　　,//多个可能的类型 　　,价值:字符串,,, 　　,//对象形式 　　,id: { 　　类型:才能,号码, 　　要求:才能成立 　　,} 　　}

<强>道具实现的原理

function  normalizeProps  (vm对象选择:,,,,,?组件),{ 　　,const  props =options.props 　　,if (道具),返回 　　,const  res =, {} 　　,let 我,val,名字 　　,if  (Array.isArray(道具),{ 　　,…… 　　,}else  if  (isPlainObject(道具)),{ 　　,…… 　　,}else  if  (process.env.NODE_ENV  !==, & # 39;生产# 39;),{ 　　,…… 　　,} 　　options.props =, res 　　}

normalizeProps函数就是vue实际处理道具的地方,从函数名的翻译我们可以看出该函数的功能就是标准化道具的值。该函数主要分成3部分:①从选项对象中获取道具的值并且定义一个res空对象;②几个如果……别的,分别根据道具值的不同类型来处理res对象;③用处理后的res对象覆盖原来选择对象的道具属性的值。

接下来看看那几个如果……其他的代码:

if  (Array.isArray(道具)),{ 　　,小姐:=props.length 　　,while (我),{ 　　val 才能=,道具(我) 　　if 才能;(typeof  val ===, & # 39;字符串# 39;),{ 　　时间=name 才能;camelize (val) 　　res才能[名字],=,{,类型:null } 　　,,},else  if  (process.env.NODE_ENV  !==, & # 39;生产# 39;),{ 　　警告才能(& # 39;props  must  be  strings  when  using  array 语法# 39;公司) 　　,,} 　　,} 　　以前,}

这个代码实际就是处理道具的值为数组的情况,例如:道具:[& # 39;名字# 39;& # 39;价值# 39;]。使用而遍历该数组,如果数组内元素的类型不是字符串并且不是生产环境,那么就抛错:“道具的值类型为数组时,数组里面的元素的类型就必须是字符串& # 39;。如果是字符串的情况下,使用camelize函数处理一下val的值,并且赋值给名字变量。这里的camelize函数的实际作用就是将& # 39;& # 39;转换为驼峰。camelize函数具体的实现方式在后面分析,然后在res对象上面添加一个名字为变量的属性,该属性的值为空对象{类型:零}。

道具:[& # 39;名字# 39;& # 39;价值# 39;]这种写法经过上面的处理后就会变成了下面这样:

道具:,{ 　　,名字:{ 　　类型:才能空 　　}, 　　,价值:{ 　　类型:才能空 　　,} 　　}

接下来看看下面这个else if (isPlainObject(道具)),这里的isPlainObject函数实际就是返回道具的值是否为对象,isPlainObject函数的具体实现我们也在后面分析。

else  if  (isPlainObject(道具)),{ 　　,for  (const  key 拷贝道具),{ 　　val 才能=,道具(例子) 　　时间=name 才能;camelize(关键) 　　res才能[名字],=,isPlainObject (val) 　　,,?瓦尔 　　,,:{,类型:val } 　　,} 　　以前,}

使用……在遍历道具对象,和上面一样使用camelize函数将& # 39;& # 39;转换为驼峰。这里有个三目运算:

res[名字],=,isPlainObject (val), ?, val :,{,类型:val }

判断了一下val如果是对象,那么在res对象上面添加一个名字为变量的属性,并且将该属性的值设置为val。这个其实就是处理下面这种道具的写法:

道具:,{ 　　,//对象形式 　　,id: { 　　类型:才能,号码, 　　要求:才能成立 　　,} 　　}

如果val不是对象,那么也在res对象上面添加一个名字为变量的属性,并且将该属性的值设置为{类型:val}。这个其实就是处理下面这种道具的写法:

道具:,{ 　　,//基础的类型检查 　　,名字:字符串, 　　,//多个可能的类型 　　,价值:字符串,,, 　　}

经过处理后的道具会变成了下面这样:

道具:,{ 　　,名字:{ 　　,,类型:字符串 　　}, 　　,价值:{ 　　类型:才能,(字符串,,数量) 　　,} 　　}

所以不管我们使用vue提供的道具哪种写法,最终vue都会帮我们转换成下面这种类型:

如何在vue中使用道具