props
props和data都是当前组件实例的属性。但区别在于:
- props的值是父组件来赋予的,且原则上不能修改赋值后的值;data的数据可以预先就赋值好也可以不赋值,后期可以任意修改
- props属性的解析顺序大于data,因此在data中是可以使用props的数据的,如下
name:'Student',
data() {
console.log(this)
return {
msg:'我是一个尚硅谷的学生',
myAge:this.age
}
},
props:{
name:{
type:String, //name的类型是字符串
required:true, //name是必要的
},
age:{
type:Number,
default:99 //默认值
},
sex:{
type:String,
required:true
}
}
- props和data不要重复定义相同的属性名;比如props有个name属性,data中也有个name属性,这样是不被允许的。
props的使用
- 首先要在子组件中进行props定义,有3种定义方式:
方式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
}
}
总结:以上3种都有人用,没有说特别推荐哪种
- 在父组件中进行使用:
<template>
<div>
<Student :name="李四" :sex="女" :age="18"/>
</div>
</template>