🌊 Vue Prop
使用 Prop 可以向子组件传递数据。
# Prop
这是一个可以在组件注册时自定义的特性。当一个值传递给一个组件的 prop 特性(Attribute)时,就变成了这个组件的属性(Property)。
一个组件默认可以拥有任意数量的 Prop,任何值都可以传递给 Prop。然后再组件实例当中,可以通过 Prop 列表访问这个值,就像访问 data
中的值。
🌰 例子:
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
2
3
4
<div id="blog-post-demo" class="demo">
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
</div>
2
3
4
5
# Prop 的大小写
由于 HTML 中的 特性 Attribute 命名方式 大小写不敏感,浏览器会讲所有大写的字符解释为小写字符。
规范:Prop 名如果为 camelCase 驼峰命名法,在模版中需要使用其等价的 kebab-case 短横线分隔命名。
🌰 例子:
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
2
3
4
5
<blog-post post-title="hello!"></blog-post>
# Prop 的类型
当没有指定 Prop 的类型时,可以简化 Prop 的列表写为 字符串列表:
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
如果希望每个 prop 都有指定的值类型。可以以对象的形式列出 prop。property 的名称和值分别是 prop 各自的名称和类型。当传送的 Prop 类型不相符合时,浏览器的控制台会报错。
🌰 例子:
props: {
title: String,
likes: Numebr,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
2
3
4
5
6
7
8
9
# 传入静态或者动态 Prop
通常可以传送给 prop 静态的值:
<blog-post title="My journey with Vue"></blog-post>
此时组件中接收到的是一个普通的字符串。
要动态传送不同类型的值,需要使用到 v-bind
,传入一个 JavaScript 表达式。更多的类型参照 Prop — Vue.js (vuejs.org) (opens new window)。
🌰 例子:
<blog-post :title="post.title"></blog-post>
或者拼接:
<blog-post :title="post.title + ' by ' + post.author.name"
></blog-post>
2
# Prop 是单向数据流
利用 Prop 可以实现 父组件传送数据到子组件。但是不可以反过来,这样防止子组件意外变更父组件的状态,导致应用的数据流向不明。因为,每当父组件发生变更,子组件的所有 prop 都会刷新为最新的值,如果子组件内部改变 prop 的值。
注意,JavaScript 对象和数组是通过引用传入的,所以对于一个数组或者对象的 prop 来说,子组件中更改变更这个对象可能会影响到父组件 ⚠️。
常见的可能会修改 Prop 的情况:
父组件传送 初始值 给子组件使用,子组件希望这个初始值能够作为一个变量数据修改。此时可以将这个初始值定义到 data property(定义一个新的 data 变量)。
子组件接收到来自父组件的原始数据,子组件需要对这个原始数据转换。最好使用这个数据定义一个计算属性。
# Prop 的类型验证
Prop 的类型 type
可以是下列原生构造函数中的一个:
String
Number
Boolean
Array
Object
Date
Function
Symbol
type
可以是一个自定义构造 has 农户,并且通过 insanceof
检查确认这个类型。
🌰 例子:
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
2
3
4
Vue.component('blog-post', {
props: {
author: Person
}
})
2
3
4
5