目录
备注:props 是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
总结
配置项props:
功能:让组件接收外部传过来的数据(父组件传数据给子组件)
(1)传递数据:
<Student name='王麻子' :age="30+1" sex="保密"></Student>
(2)接收数据:(props接收到的数据是放在组件实例对象VC上面)
方式1:简单声明接收(只接收):
props:['name','age','sex']
方式2:接收的同时对数据进行类型限制(限制类型)
props:{ name:String, age:Number, sex:String }
方式3:接收的同时对数据进行类型限制+默认值的指定+必要性的限制(限制类型,限制必要性,指定默认值)
props:{ name:{ type:String, //name的类型是字符串 required:true //name是必须要传的 }, age:{ type:Number, default:99 //如果age属性值没传过来,就用默认值99 }, sex:{ type:String, required:true } }
注意:一般 必要性 required:true 和 默认值default 不会同时出现。
备注:
props 是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
传递数据:传的属性名,也不能是一些vue中已经用的名称:比如说 key,ref等
接收数据:方式1: 简单声明接收(只接收)
注意:props接收到的数据是放在组件实例对象VC上面。
结果:
问题1:如果子组件Student.vue接收到数据后,要对数据进行操作,比如说:让显示在页面上的年龄比接收到的年龄要大,怎么操作?--> 通过 v-bind绑定属性 ,其属性值是 运行引号里面JS表达式执行的结果
App.vue传:
子组件:Student.vue中:
<h2>学生年龄:{{age+1}}</h2>
结果为:
分析:想要的是31但是结果却是301.想要父组件传一个number类型的30,但是 规定了 是 key = 'value' 的形式,传过来的是字符串,所以 '30'+1 = '301'
解决办法:通过v-bind绑定属性,其属性值是 运行引号里面JS表达式执行的结果,这样它就会将JS表达式 30+1 为31number传给子组件。 如果不用v-bind绑定,传到子组件中的就都是字符串。
此时这里的age接收到就算 number类型的 31.
结果:
备注:props 是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。
原理是:props中的接收到的数据优先被放到VC上,data中的数据名key,不要和props中的key相同 。props中数据的优先级比 data中数据 优先级高,就先被放到VC上 , props中的接收到的数据优先被放到VC上。如果想改props接收到的数据,在data中进行改,因为props数据先被放到VC上,然后通过data才去改放在VC上的数据。