個人覺得Prop的使用需要注意四點：

---

第一點： 使用 DOM 中的模板時，camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名

HTML

Vue.component('blog-post', {// 在 JavaScript 中是 camelCase 的props: ['postTitle'],template: '<h3>{{ postTitle }}</h3>' })

JS

<!-- 在 HTML 中是 kebab-case 的 --> <blog-post post-title="hello!"></blog-post>

第二點：傳遞靜態或動態 Prop

靜態： 即表示 字符串，整數等不會改變的值（不需要綁定）

<blog-post title="My journey with Vue"></blog-post>

動態： 即表示 數組，對象等會改變的值（需要綁定）

<!-- 動態賦予一個變量的值 --><blog-post v-bind:title="post.title"></blog-post><!-- 動態賦予一個復雜表達式的值 --><blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

---

第三點：單項數據流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。
即表示：

在子組件中任何生命周期都無法獲得 prop的值

在子組件任何methods里面都無法獲得 prop的值

只可以在watch里面對prop進行監聽，和相關處理

---

第四點：Prop 可以進行數據驗證

我們可以為組件的 prop 指定驗證要求，例如你知道的這些類型。如果有一個需求沒有被滿足，則 Vue 會在瀏覽器控制臺中警告你。

props: {// 必填的字符串propC: {type: String,required: true},// 帶有默認值的數字propD: {type: Number,default: 100},// 多個可能的類型BB: [String, Number],// 沒有默認值的對象propE: {type: Object,// 對象或數組默認值必須從一個工廠函數獲取default: （）=>（{}）},// 帶有默認值的對象propE: {type: Object,// 對象或數組默認值必須從一個工廠函數獲取default: function () {return { message: 'hello' }}},// 自定義驗證函數propF: {validator: function (value) {// 這個值必須匹配下列字符串中的一個return ['success', 'warning', 'danger'].indexOf(value) !== -1}}

總結

以上是生活随笔為你收集整理的vue2.0 prop的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。