一、props规范化
1.1概念:规范化只是格式上的规范化,确保我们的props是一个对象,对象的key的value又是一个对象;
1.2流程:
规范化主要发生在这几个流程中:
<script> const A = { name:'A', props:['name','nick-name'], template:` <div id="dependencyDepend"> <p> name: {{name}}</p> <p> nickName: {{nickName}}</p> </div> `, } const B = { name:'B', template:` <div id="dependencyDepend"> <p> age: {{age}}</p> <p> sex: {{sex}}</p> </div> `, props:{ age:Number, sex:{ type:String, default:'female', validator(value){ return value === 'male' || value === 'female' } } } } new Vue({ el: "#app", components:{ A,B, }, template:` <div id="dependencyDepend"> <A name='kobe' nickName='james'> </A> <B :age='18' sex='mail'> </B> </div> ` }); </script>
在根vm实例init时,会进行Vue.opstions和自己写的options合并,所以会调用mergeOptions函数;
然后这个函数又会调用normalizeProps;并且把我们定义的props配置项和根vm实例传递进去;
然后就是把我们自己写的props配置项规范化成对象的形式;方便后续mergeOptions;
为什么后面又需要验证,前面不是已经规范化了吗?
前面的规范化只是格式上的规范化,确保我们的props是一个对象,对象的key的value又是一个对象;
但是格式对了,语法并不一定对。
比如:
props:{ age:{ type:'djldsadaf', default:'18', } }
这里面的type属性的值就是错的,所以需要验证;
原创文章,作者:254126420,如若转载,请注明出处:https://blog.ytso.com/278160.html