props

本页面会假定你已经阅读过 组件基础。如果你还不熟悉组件,请先阅读组件基础后再阅读本页面。

prop 命名方案(驼峰式和串联式)

HTML 属性名称对大小写不敏感,因此浏览器会将所有大写字符解释为小写字符。也就是说。当你在你 DOM 模板中书写 prop 时,你应当将驼峰式(camelCase)转写为等价的(连字符分割的)串联式(kebab-case):

Vue.component('blog-post', {
// 在 JavaScript 中使用驼峰式(camelCase)
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中使用串联式(kebab-case) -->
<blog-post post-title="hello!"></blog-post>

再次申明,如果是在使用字符串模板的场景,则没有这些限制。

prop 类型

目前为止,我们只看到字符串数组形式展示的 props:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

通常,你会希望每个 prop 都对应指定类型的值。在这些场景中,你可以将 props 展示为对象,其中每个属性的名称和值,分别包含 prop 名称和类型:

props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}

这不只是使你的组件更像文档,而且还会在传递错误类型的值时,在浏览器 JavaScript 控制台中抛出警告以提醒用户。在本页面下方 类型检查和其他 prop 验证 部分,你可以了解更多信息。

静态 props 和动态 props

到目前为止,你已经见过向 props传递一个静态值,就像这样:

<blog-post title="我的 Vue 旅程"></blog-post>

还可以通过 v-bind 给 props 分配动态值,就像这样:

<!-- 动态分配一个变量对应的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态分配一个复合表达式对应的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

在上面两个示例中,我们传递字符串值,然而,实际上可以给一个 prop 传递_任意_类型的值。

传递一个 Number 类型值

<!-- `42` 是静态的,这就需要我们使用 v-bind, -->
<!-- 来告诉 Vue 它是以 JavaScript 表达式表现,而不是一个字符串 -->
<blog-post v-bind:likes="42"></blog-post>

<!-- 将一个变量,动态地分配到属性值上 -->
<blog-post v-bind:likes="post.likes"></blog-post>

传递一个 Boolean 类型值

<!-- Including the prop with no value will imply `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">