props特性的深入了解

Prop命名风格

（1）Prop 的命名风格
①PascalCase首字母大写命名即大驼峰法
②camelCase 小驼峰命名法
③kebab-case 短横线分隔命名法

注意：
HTML 中的特性是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，驼峰命名法的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

<!-- html代码 -->
		<div id="demo">
			<my-age :my-age="20"></my-age>//短横线命名法
		</div>
// vue代码
		 Vue.component('my-age',{
   
			props:['myAge'],//小驼峰命名法
			template:`
			<div>
			<h2>我的虚岁是{
   {
   myAge+1}}</h2>//小驼峰命名法
			</div>
			` 
		 }) 
		var demo=new Vue({
   
			el:"#demo",
		})

Prop 动态和静态

（1）静态Prop

<!-- html代码 -->
		<div id="demo">
			<my-age my-age="20"></my-age>//短横线命名法
		</div>
// vue代码
		 Vue.component('my-age',{
   
			props:['myAge'],//小驼峰命名法
			template:`
			<div>
			<h2>我的虚岁是{
   {
   myAge+1}}</h2>//小驼峰命名法
			</div>
			` 
		 }) 
		var demo=new Vue({
   
			el:"#demo",
		})
打印结果是我的虚岁是201

（2）动态Prop
prop 可以通过 v-bind 动态赋值，对上述案例稍作修改

<!-- html代码 -->
		<div id="demo">
			<my-age :my-age="20"></my-age>//短横线命名法
		</div>
// vue代码
		 Vue.component('my-age',{
   
			props:['myAge'],//小驼峰命名法
			template:`
			<div>
			<h2>我的虚岁是{
   {
   myAge+1}}</h2>//小驼峰命名法
			</div>
			` 
		 }) 
		var demo=new Vue({
   
			el:"#demo",
		})
	答应结果是我的虚岁是21

props传值格式

props传值格式：props传值时，如果属性添加了:则会将后面的属性值理解为表单式，否则将会理解为字符串
具体详情看上文代码

组件参数props校验

组件参数校验：
父组件向子组件传值时，子组件有权对传递的内容进行相关约束，这个过程便是组件的参数校验。

1.字符串数组格式传值代码如