1.prop的大小写
HTML中的特姓名是不敏感的,所以浏览器会把所有大写字符解释为小写字符,所以在DOM中,驼峰命名法的prop名需要用等价的短横线分隔命名。 如果是使用字符串模板,这个限制就不存在。
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
2.prop类型
通常使用的是以字符串数组形式列出的prop
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
也可以用对象的形式列出prop,属性的名和值分别是prop各自的名称和类型。
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
3.单向数据流
父级的prop的更新会向下流动到子组件中,反之不行。如果在子组件中改变prop,vue会发出警告。
有两种常见情况需要注意:
a prop传递的数据,希望将其作为本地的prop数据使用。这种情况下,最好定义一个本地data属性,将prop作为它的初始值。
b 这个prop以一种原始值传入并且需要转换等操作。这种情况下,最好使用这个prop的值定义一个计算属性。
4.prop验证
为组件的 prop 指定验证要求,可以为props中的值提供一个带有验证需求的对象,而不是一个字符串数组。
Vue.component('my-component', {
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
5.禁用特性继承
inheritAttrs: false,
可以在组件的选项中设置。例如:
Vue.component('my-component', {
inheritAttrs: false,
// ...
})