1.prop的大小写
HTML中的attribute名称大小写不敏感,所以当使用DOM中的模板时,需要将驼峰命名法的prop名(firstName)改成短横线命名(first-name):
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都有指定的值类型,可以以对象形式列出prop:
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
3. 传递静态或动态prop
给prop传值可以是静态的也可以是动态的:
<!--静态的值-->
<blog-post title="My journey with Vue"></blog-post>
<!--动态的值-->
<blog-post v-bind:title="post.title"></blog-post>
上边这两个例子,传入的值都是字符串类型,实际上任何类型的值都可以传给prop
(1)传入一个数字
<!-- 即便 `42` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>
(2)传入一个布尔值
<!-- 包含该 prop 没有值的情况在内,都意味着 `true`。-->
<blog-post is-published></blog-post>
<!-- 即便 `false` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>
(3)传入一个数组
<!-- 即便数组是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
(4)传入一个对象
<!-- 即便对象是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>
(5)传入一个对象的所有属性
要将一个对象的所有属性都作为prop传入,可以使用不带参数的v-bind取代v-bind:prop-name:
给定一个对象:post: { id: 1, title: 'My Journey with Vue' },就可以这样传递:
<blog-post v-bind="post"></blog-post>
等价于:
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>
4.单向数据流
所有的prop都使得其父子prop之间形成了一个单向下行绑定:父级prop的更新会向下流动到子组件中,但反过来不行。
每次父组件发生更新时,子组件中的所有prop都将会刷新为最新的值,这意味着你不该在一个子组件内部改变prop的值。
这有两种常见的试图改变prop的情形:
(1)这个prop用来传递一个初始值,这个子组件接下来希望将其作为一个本地的prop来使用
这种情况下,最好定义一个本地的data属性,并将这个prop用作其初始值:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
(2)这个prop以一种原始的值传入且需要进行转换
这种情况下,最好使用这个prop的值来定义一个计算属性:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
5.prop验证
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
}
}
}
})
注意:那些prop会在一个组件实例创建之前进行验证,所以实例的属性在default或validator函数中是不可用的
6.非prop的Attribute
一个非prop的attribute是指传向一个组件,但是该组件并没有相对应的prop定义的attribute
(1)替换/合并已有的attribute
<bootstrap-date-input>
的模板是这样的:
<input type="date" class="form-control">
为了给日期选择器定制一个主题,会有这样的类名:
<bootstrap-date-input
data-date-picker="activated"
class="date-picker-theme-dark"
></bootstrap-date-input>
对于绝大多数 attribute 来说,从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text"
就会替换掉 type="date"
并把它破坏!庆幸的是,class
和 style
attribute 会稍微智能一些,即两边的值会被合并起来,从而得到最终的值:form-control date-picker-theme-dark
。
(2)禁用attribute继承
如果你不希望组件的根元素继承 attribute,你可以在组件的选项中设置 inheritAttrs: false
。
Vue.component('my-component', {
inheritAttrs: false,
// ...
})