vue props的所有重点知识
发布时间
阅读量：
阅读量
props
一、props规定类型：
1.不规定类型。默认情况，props是可以接收数组的，如下：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
不验证数值的任何类型，通常情况最好不这样写。
2.只做类型效验时，props传入对象，每一个键对应着一个类型的值。如下：
//常用类型
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // 或任何其他构造函数
}
二、传递参数。（静态【常量】或动态【变量】）
1.传递常量值：
<blog-post title="My journey with Vue"></blog-post>
注意 ：如果除字符串的其他值，比如boolean值，必须写成:title="false"，否则就会当成一个字符串false来处理，其他类型的值也是。2.传递变量值：
<!-- 动态赋予一个变量的值 -->
<blog-post :title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post :title="post.title + ' by ' + post.author.name"></blog-post>
说明：动态赋值的时候，一般是指定一个data中的变量，不过也可以是一个表达式，如：:title="title+'名字'"；也可以是计算属性computed，或者过滤器。
三、Prop 验证。
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default() {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator(value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].includes(value)
}
},
// 具有默认值的函数
propG: {
type: Function,
// 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
default() {
return 'Default function'
}
}
}
全部评论 (0)
还没有任何评论哟~