個(gè)人覺得Prop的使用需要注意四點(diǎn)：

---

第一點(diǎn)： 使用 DOM 中的模板時(shí)，camelCase (駝峰命名法) 的 prop 名需要使用其等價(jià)的 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>

第二點(diǎn)：傳遞靜態(tài)或動(dòng)態(tài) Prop

靜態(tài)： 即表示 字符串，整數(shù)等不會(huì)改變的值（不需要綁定）

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

動(dòng)態(tài)： 即表示 數(shù)組，對(duì)象等會(huì)改變的值（需要綁定）

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

---

第三點(diǎn)：單項(xiàng)數(shù)據(jù)流

所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過來則不行。這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。
即表示：

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

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

只可以在watch里面對(duì)prop進(jìn)行監(jiān)聽，和相關(guān)處理

---

第四點(diǎn)：Prop 可以進(jìn)行數(shù)據(jù)驗(yàn)證

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。