@[toc]
3.10props属性
组件可以嵌套使用,叫做<font color='red'>父子组件</font>。那么父组件经常要给子组件传递数据这叫做<font color='red'>父子组件通信</font>。父子组件的关系可以总结为<font color='red'> props 向下传递,事件向上传递</font>。父组件通过 <font color='red'>prop 给子组件下发数据,子组件通过事件给父组件发送消息</font>。看看它们是怎么工作的:
<font color='red'>使用父组件给子组件传递属性流程:</font>
- 在父组件中定义数据
- 在使用组件时,绑定父组件中的数据
- 在子组件中通过props属性声明父组件中传递过来的参数
在template属性中使用父组件中的参数
举例:父组件给子组件传递属性msg和greetText,子组件用属性a和b接收,并打印输出
<div id="app">
<!-- v-bind:a 简写成 :a -->
<child :a="msg" :b="greetText"></child>
</div>
<script>
/***
* 父子组件通信: 父组件通过props属性向子组件进行数据传递
* 使用方式: 子组件定义时用props指定接收参数名
* */
Vue.component('child', {
//声明props
props:['a','b'],
//使用父组件传递的数据
template:'<span>{{a}} == {{b}}</span>'
});
var app = new Vue({
el:'#app',
data:{
msg:'来自父组件的消息',
greetText:'你好Child'
}
});
</script>
结果展示
3.11props校验
子组件在接收父组件传入数据时, 可以进行prop校验,来确保数据的格式和是否必传。
<font color='red'>注意点1:</font>props可配置3种形式,如果没有参数格式化校验,推荐形式1使用居多。
形式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 //默认值
},
sex:{
type:String,
required:true
}
}
<font color='red'>注意点2:</font>
问题:如果data中属性名和props中属性重名,谁优先级高?
<font color='red'>答案:</font>props种属性名优先级高,因此为了避免不必要问题,避免data中属性名和props中属性重名
<font color='red'>注意点3:</font>props后面是对象而不是数组形式(即:只接收属性不校验可使用数组形式,如props:[],如果要进行校验请使用对象形式,如props:{}),同时可以指定以下属性:
1) type: 指定数据类型 String Number Object ...注意不能使用字符串数组,只能是对象大写形式
2) required: 指定是否必输
3) default: 给默认值或者自定义函数返回默认值
4) validator: 自定义函数校验
形式如下:
Vue.component('example', {
props: {
// 基础类型检测 (`null` 指允许任何类型)
propA: Number,
// 可能是多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数值且有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
举例
完整代码:
<div id="app">
<child :a="msg" :c="greetText" :f="hello"></child>
</div>
<script>
Vue.component('child', {
//声明props 检验
props:{
'a': String,
'b': [Number,String],
'c': {
required:true
},
'd':{
default:100
},
e:{
type: Number,
default: function () {
return 1;
}
},
f:{
type:Number,
validator: function (value) {
return value < 100;
}
}
},
template:'<span>{{a}} == {{d}} == {{e}} == {{f}}</span>'
});
var app = new Vue({
el:'#app',
data:{
msg:'来自父组件的消息',
greetText:'你好Child',
hello:12
}
});
</script>
结果展示
<font color='red'>注意点4:</font>props是用来接收传递过来的属性值,最后会统一绑定到vc上,最好不要直接修改props的属性值(也就是不要直接修改vc上面的props接收的属性值,会报错),会报错如图,所以为了避免这个问题,最好的解决方案是在data中重新定一个新属性值,用来接收props中传递过来的参数属性
<font color='red'>注意点5:</font>组件标签传递的属性名也是有限制的,不能啥都瞎传,比如你想传递key就会报错如图,报错说key已经被征用了,不让使用
<Student name="李四" sex="女" :age="18" key=”123’/>
props:['name','age','sex',key]
3.12非props属性
标签引用子组件时,非定义的props属性,自动合并到子组件上,class和style也会自动合并,如果class或者style重复采用就近原则。
举例:定义子组件设置class和style,而标签引用子组件时也设置了class和style,那么会进行属性合并,如果重名采用就近原则。
<div id="app">
<child data-index="0" class="cont" style="font-size: 20px;"></child>
</div>
<script>
/***
* 引用子组件: 非定义的prop属性,自动合并到子组件上,class和style也会自动合并
* */
Vue.component('child', {
template:'<span class="item" style="color:red;">我是child</span>'
});
var app = new Vue({
el:'#app'
});
</script>
结果展示
本人其他相关文章链接
1.《基础篇第1章:vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
2.《基础篇第2章:vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结
3.《进阶篇第3章:vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点
7.vue2知识点:列表渲染(包含:v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测)
9.vue2知识点:生命周期(包含:生命周期介绍、生命周期钩子、整体流程图详解)
13.vue2知识点:组件的props属性、非props属性、props属性校验
16.vue2知识点:动态组件
17.vue2知识点:混入
19.vue2知识点:全局事件总线(GlobalEventBus)
23.vue2知识点:路由
25.vue组件通信案例练习(包含:父子组件通信及平行组件通信)
26.vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
27.vue2基础组件通信案例练习:待办事项Todo-list案例练习
28.vue2基础组件通信案例练习:把案例Todo-list改写成本地缓存
29.vue2基础组件通信案例练习:把案例Todo-list改成使用自定义事件
30.vue2基础组件通信案例练习:把案例Todo-list改成使用全局事件总线
31.vue2基础组件通信案例练习:把案例Todo-list改成使用消息订阅与发布
32.vue2基础组件通信案例练习:把案例Todo-list新增编辑按钮
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。