本文實(shí)例講述了Vue Prop屬性功能與用法。分享給大家供大家參考，具體如下：

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

HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味著當(dāng)你使用 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 類型

到這里，我們只看到了以字符串?dāng)?shù)組形式列出的 prop：

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

但是，通常你希望每個 prop 都有指定的值類型。這時，你可以以對象形式列出 prop，這些屬性的名稱和值分別是 prop 各自的名稱和類型：

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

這不僅為你的組件提供了文檔，還會在它們遇到錯誤的類型時從瀏覽器的 JavaScript 控制臺提示用戶。你會在這個頁面接下來的部分看到類型檢查和其它 prop 驗(yàn)證。

3 傳遞靜態(tài)或動態(tài) Prop

像這樣，你已經(jīng)知道了可以像這樣給 prop 傳入一個靜態(tài)的值：

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

你也知道 prop 可以通過 v-bind 動態(tài)賦值，例如：

<!-- 動態(tài)賦予一個變量的值 --><blog-post v-bind:title="post.title"></blog-post><!-- 動態(tài)賦予一個復(fù)雜表達(dá)式的值 --><blog-post v-bind:title="post.title + ' 作者： ' + post.author.name"></blog-post>

在上述兩個示例中，我們傳入的值都是字符串類型的，但實(shí)際上任何類型的值都可以傳給一個 prop。

3.1 傳入一個數(shù)字

<!-- 靜態(tài)--><!-- 這里的 40 實(shí)際是 JS 表達(dá)式--><blog-post v-bind:likes="40"></blog-post><!-- 動態(tài)--><blog-post v-bind:likes="post.likes"></blog-post>

3.2 傳入一個布爾值

<!-- 傳入布爾值--><!-- 如果 prop 沒有該值，則表示 true--><blog-post is-published></blog-post><!-- 靜態(tài)--><!-- 這里的 false 實(shí)際是 JS 表達(dá)式--><blog-post v-bind:is-published="false"></blog-post><!-- 動態(tài)--><blog-post v-bind:is-published="post.isPublished"></blog-post>