Vue Prop属性功能与用法实例详解

本文实例讲述了Vue Prop属性功能与用法。分享给大家供大家参考，具体如下：

1 Prop 的大小写 (camelCase vs kebab-case)

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

html：

<div id="app-1">  <!-- HTML 中是 kebab-case -->  <blog-post post-title="你好！"></blog-post></div>

js：

//Prop 的大小写 (camelCase vs kebab-case)Vue.component('blog-post', {  //在 js 中是 camelCase  props: ['postTitle'],  template: '<h3>{{ postTitle }}</h3>'});new Vue({  el: '#app-1'})

重申一次，如果你使用字符串模板，那么这个限制就不存在了。

2 Prop 类型

到这里，我们只看到了以字符串数组形式列出的 prop：

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

但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

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

这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。你会在这个页面接下来的部分看到类型检查和其它 prop 验证。

3 传递静态或动态 Prop

像这样，你已经知道了可以像这样给 prop 传入一个静态的值：

<blog-post title="开花啦"></blog-post>

你也知道 prop 可以通过 v-bind 动态赋值，例如：

<!-- 动态赋予一个变量的值 --><blog-post v-bind:title="post.title"></blog-post><!-- 动态赋予一个复杂表达式的值 --><blog-post v-bind:title="post.title + ' 作者： ' + post.author.name"></blog-post>

在上述两个示例中，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 prop。

3.1 传入一个数字

<!-- 静态--><!-- 这里的 40 实际是 JS 表达式--><blog-post v-bind:likes="40"></blog-post><!-- 动态--><blog-post v-bind:likes="post.likes"></blog-post>

3.2 传入一个布尔值

<!-- 传入布尔值--><!-- 如果 prop 没有该值，则表示 true--><blog-post is-published></blog-post><!-- 静态--><!-- 这里的 false 实际是 JS 表达式--><blog-post v-bind:is-published="false"></blog-post><!-- 动态--><blog-post v-bind:is-published="post.isPublished"></blog-post>