這篇文章主要介紹了Vue Prop屬性功能與用法,結合實例形式較爲詳細的分析了vue.js中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>
3.3 傳入一個數組
<!-- 靜態 --> <blog-post v-bind:comment-ids="[1,2,3]"></blog-post> <!-- 動態--> <blog-post v-bind:comment-ids="post.commentIds"></blog-post>
3.4 傳入一個對象
<!-- 靜態 -->
<blog-post v-bind:author="{name:'Deniro',company:'DreamWork'}"></blog-post>
<!-- 動態-->
<blog-post v-bind:author="post.author"></blog-post>
3.5 傳入一個對象的所有屬性
如果你想要將一個對象的所有屬性都作爲 prop 傳入，你可以使用不帶參數的 v-bind (取代 v-bind:prop-name)。例如，對於一個給定的對象 post：
post: {
id: 1,
title: 'xx 新聞'
}
下面的模板：
<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。如果你這樣做了，Vue 會在瀏覽器的控制檯中發出警告。
這裏有兩種常見的試圖改變一個 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()
}
}
注意在 JavaScript 中對象和數組是通過引用傳入的，所以對於一個數組或對象類型的 prop 來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。
5 Prop 驗證
我們可以爲組件的 prop 指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制檯中警告你。這在開發一個會被別人用到的組件時尤其有幫助。
爲了定製 prop 的驗證方式，你可以爲 props 中的值提供一個帶有驗證需求的對象，而不是一個字符串數組。例如：
Vue.component('my-component', {
props: {
//基礎類型檢查（null 可以匹配任意類型）
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) {
//value 必須是字符串數組中的某一個值
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
});
當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制檯的警告。
注意那些 prop 會在一個組件實例創建之前進行驗證，所以實例的屬性 (如 data、computed 等) 在 default 或 validator 函數中是不可用的。
類型檢查
type 可以是下列原生構造函數中的一個：
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
額外的，type 還可以是一個自定義的構造函數，並且通過 instanceof 來進行檢查確認。例如，給定下列現成的構造函數：
function Person(firstName,lastName){
this.firstName=firstName;
this.lastName=lastName;
};
你可以使用：
Vue.component('blog-post', {
props: {
author: Person
}
});
來驗證 author prop 的值是否是通過 new Person 創建的。
6 非 Prop 的特性
一個非 prop 特性是指傳向一個組件，但是該組件並沒有相應 prop 定義的特性。
因爲顯式定義的 prop 適用於向一個子組件傳入信息，然而組件庫的作者並不總能預見組件會被用於怎樣的場景。這也是爲什麼組件可以接受任意的特性，而這些特性會被添加到這個組件的根元素上。
例如，想象一下你通過一個 Bootstrap 插件使用了一個第三方的 <bootstrap-data-input> 組件，這個插件需要在其 <input> 上用到一個 data-date-picker 特性。我們可以將這個特性添加到你的組件實例上：
<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
然後這個 data-date-picker="activated" 特性就會自動添加到 <bootstrap-date-input>的根元素上。
6.1 替換/合併已有的特性
想象一下 <bootstrap-date-input> 的模板是這樣的：
<input type="date" class="form-control">
爲了給我們的日期選擇器插件定製一個主題，我們可能需要像這樣添加一個特別的類名：
<bootstrap-date-input data-date-picker="activated" class="date-picker-theme-dark" ></bootstrap-date-input>
在這種情況下，我們定義了兩個不同的 class 的值：
- form-control，這是在組件的模板內設置好的。
- date-picker-theme-dark，這是從組件的父級傳入的。
對於絕大多數特性來說，從外部提供給組件的值會替換掉組件內部設置好的值。所以如果傳入 type="text" 就會替換掉 type="date" 並把它破壞！慶幸的是，class 和 style 特性會稍微智能一些，即兩邊的值會被合併起來，從而得到最終的值：form-control date-picker-theme-dark。
6.2 禁用特性繼承
如果你不希望組件的根元素繼承特性，你可以設置在組件的選項中設置 inheritAttrs: false。例如：
Vue.component('my-component', {
inheritAttrs: false,
// ...
})
這尤其適合配合實例的 $attrs 屬性使用，該屬性包含了傳遞給一個組件的特性名和特性值，例如：
{
class: 'username-input',
placeholder: 'Enter your username'
}
有了 inheritAttrs: false 和 $attrs，你就可以手動決定這些特性會被賦予哪個元素。在撰寫基礎組件的時候是常會用到的：
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
`
})
這個模式允許你在使用基礎組件的時候更像是使用原始的 HTML 元素，而不會擔心哪個元素是真正的根元素：
<base-input v-model="username" class="username-input" placeholder="Enter your username" ></base-input>
希望本文所述對大家vue.js程序設計有所幫助。