這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)Prop如何在Vuejs中使用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)公司長(zhǎng)期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為鄂州企業(yè)提供專業(yè)的網(wǎng)站制作、網(wǎng)站建設(shè)，鄂州網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

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

組件實(shí)例的作用域是孤立的。這意味著不能并且不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。可以使用props把數(shù)據(jù)傳給子組件。

prop是父組件用來(lái)傳遞數(shù)據(jù)的一個(gè)自定義屬性。子組件需要顯示的地用props選項(xiàng)聲明”prop”

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

然后向它傳入一個(gè)普通字符串：

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

結(jié)果：

hello!

二、camelCase vs.kebab-case

html不區(qū)分大小寫(xiě)。當(dāng)使用非字符串模板時(shí)，prop的名字形式會(huì)從camelCase轉(zhuǎn)為kebab-case（短橫線隔開(kāi)）：

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

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

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

三、動(dòng)態(tài)Prop

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

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

使用v-bind的縮寫(xiě)語(yǔ)法通常更簡(jiǎn)單：

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

四、字面量語(yǔ)法vs動(dòng)態(tài)語(yǔ)法

因?yàn)樗且粋€(gè)字面prop ，它的值以字符串 "1" 而不是以實(shí)際的數(shù)字傳下去。如果想傳遞一個(gè)實(shí)際的 JavaScript 數(shù)字，需要使用 v-bind ，從而讓它的值被當(dāng)作 javascript 表達(dá)式計(jì)算：

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

prop是單項(xiàng)綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會(huì)反過(guò)來(lái)。這是為了防止子組件無(wú)意修改了父組件的狀態(tài)——這會(huì)讓?xiě)?yīng)用的數(shù)據(jù)流難以理解。同時(shí)，這也很好理解，父組件是子組件的高度抽象，表示子組件的共有部分，一個(gè)組件的數(shù)據(jù)改變并不會(huì)改變其抽象，然而其抽象的改變卻代表著所有子組件的改變。

另外，每次組漸漸更新時(shí)，子組件的所有prop都會(huì)更新為最新值。這意味著你不應(yīng)該在子組件內(nèi)部改變prop。如果你這么做了，Vue會(huì)在控制臺(tái)給出警告。

通常有兩種改變prop的情況：

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

2.prop作為需要被轉(zhuǎn)變的原始值傳入。

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

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

b.定義一個(gè) computed 屬性，此屬性從 prop 的值計(jì)算得出。

  ```
  props: ['size'],
  computed: {
    normalizedSize: function () {
     return this.size.trim().toLowerCase()
   }
  }

六、Prop驗(yàn)證

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

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

type可以是下面的原生構(gòu)造器：

• String

• Number

• Boolean

• Function

• Object

• Array

type也可以是一個(gè)自定義構(gòu)造器，使用instanceof檢測(cè)。當(dāng)prop驗(yàn)證失敗了，如果使用的是開(kāi)發(fā)版本會(huì)拋出一條警告。

上述就是小編為大家分享的Prop如何在Vuejs中使用了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：Prop如何在Vuejs中使用
新聞來(lái)源：http://jinyejixie.com/article12/ppidgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、做網(wǎng)站、網(wǎng)站導(dǎo)航、定制網(wǎng)站、虛擬主機(jī)、建站公司

廣告

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