1.基础用法：使用Prop在父组件内向子组件传递参数
- 可以传输动态值和静态值
//父组件
<son-components message1="静态值" :message2="dynamic"></son-components>
data(){
return{dynamic:"动态值"}
}
//子组件
<script>
export default {
props：['message1'，'message2'],
data(){
return{}
},
created(){
//直接使用this获取到props内的值
console.log(this.message1) // 静态值
console.log(this.message2) // 动态值
}
}
</script>
2.单向数据流
- 父组件刷新会导致props也刷新
- 不可以直接修改props内的值，vue会警告报错。赋值给data内的参数再做处理
3.Prop验证
如果你开发一个组件被大家使用，那么可以在组件内通过Prop验证来限制参数类型，提高组件的可读性。如果使用者传入的参数并不符合组件要求，Vue会在控制台给与提示。
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
【有收获请点个赞哦~~】
