這篇文章將為大家詳細講解有關如何理解vuejs中的prop，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

網(wǎng)站建設哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、重慶小程序開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了平邑免費建站歡迎大家使用！

一、使用Prop傳遞數(shù)據(jù)

組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。可以使用props把數(shù)據(jù)傳給子組件。
prop是父組件用來傳遞數(shù)據(jù)的一個自定義屬性。子組件需要顯示的地用props選項聲明“prop”

Vue.component('child',{
    props:['message'],
    template:'<span>{{ message }}</span>'
})

然后向它傳入一個普通字符串：

<child message="hello!"></child>

結果：

hello!

二、camelCase vs.kebab-case

html不區(qū)分大小寫。當使用非字符串模板時，prop的名字形式會從camelCase轉為kebab-case（短橫線隔開）：

//camelCase
Vue.component('child',{
    props:['myMessage'],
    template:'<span>{{ message }}</span>'
})

//kebab-case
<child my-message="hello!"></child>

再次說明，如果你是用字符串模板，不用在意這些限制。

三、動態(tài)Prop

類似于用v-bind綁定HTML特性到一個表達式，也可以用v-bind動態(tài)綁定props的值到父組件的數(shù)據(jù)中。每當父組件的數(shù)據(jù)變化時，該變化也會傳導給子組件。

<div>
    <input v-model="parrentMsg">
    <br>
    <child v-bind:my-message="parrentMsg"></child>
</div>

使用v-bind的縮寫語法通常更簡單：

<child :my-message="parrentMsg"></child>

四、字面量語法vs動態(tài)語法

因為它是一個字面prop ，它的值以字符串 "1" 而不是以實際的數(shù)字傳下去。如果想傳遞一個實際的 JavaScript 數(shù)字，需要使用 v-bind ，從而讓它的值被當作 JavaScript 表達式計算：

五、單項數(shù)據(jù)流

prop是單項綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態(tài)——這會讓應用的數(shù)據(jù)流難以理解。同時，這也很好理解，父組件是子組件的高度抽象，表示子組件的共有部分，一個組件的數(shù)據(jù)改變并不會改變其抽象，然而其抽象的改變卻代表著所有子組件的改變。
另外，每次組漸漸更新時，子組件的所有prop都會更新為最新值。這意味著你不應該在子組件內(nèi)部改變prop。如果你這么做了，Vue會在控制臺給出警告。
通常有兩種改變prop的情況：

1.prop作為初始值傳入，子組件之后只是將它的初始值作為本地數(shù)據(jù)的初始值使用；

2.prop作為需要被轉變的原始值傳入。

更確切地說這兩種情況是：
a.定義一個局部data屬性，并將prop的初始值作為局部數(shù)據(jù)的初始值。

props: [‘initialCounter’], 
 data: function () { 
 return { counter: this.initialCounter} 
 }

    b.定義一個 computed 屬性，此屬性從 prop 的值計算得出。
   ```
    props: ['size'],
    computed: {
        normalizedSize: function () {
         return this.size.trim().toLowerCase()
     }
    }

六、Prop驗證

組件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發(fā)出警告。當組件給其他人使用時這很有用。
prop 是一個對象而不是字符串數(shù)組時，它包含驗證要求：

Vue.component('example', {
  props: {
    // 基礎類型檢測 （`null` 意思是任何類型都可以）
    propA: Number,
    // 多種類型
    propB: [String, Number],
    // 必傳且是字符串
    propC: {
      type: String,
      required: true
    },
    // 數(shù)字，有默認值
    propD: {
      type: Number,
      default: 100
    },
    // 數(shù)組／對象的默認值應當由一個工廠函數(shù)返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數(shù)
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type可以是下面的原生構造器：

* String

* Number

* Boolean

* Function

* Object

* Array

type也可以是一個自定義構造器，使用instanceof檢測。當prop驗證失敗了，如果使用的是開發(fā)版本會拋出一條警告。

關于如何理解vuejs中的prop就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前文章：如何理解vuejs中的prop
文章分享：http://m.kartarina.com/article46/gcieeg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供Google、靜態(tài)網(wǎng)站、ChatGPT、云服務器、企業(yè)建站、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)