在 Vue 中，父子組件的關(guān)系可以總結(jié)為 props向下傳遞，事件向上傳遞。父組件通過(guò) props 給子組件下發(fā)數(shù)據(jù)，子組件通過(guò)事件給父組件發(fā)送消息?？纯此鼈兪窃趺垂ぷ鞯?。

 一、基本用法

組件不僅僅是要把模板的內(nèi)容進(jìn)行復(fù)用，更重要的是組件間要進(jìn)行通信。

在組件中，使用選項(xiàng)props 來(lái)聲明需要從父級(jí)接收的數(shù)據(jù)， props 的值可以是兩種， 一種是字符串?dāng)?shù)組，一種是對(duì)象。

1.1　字符串?dāng)?shù)組：

  <div id="app4">
   <my-component4 message="數(shù)據(jù)來(lái)自父組件"></my-component4>
  </div>
Vue.component('my-component4',{
 props: ['message'],
 template: '<div>{{message}}</div>'
});
var app4 = new Vue({
 el: '#app4'
});

渲染后的結(jié)果為：

<div id= ” app4”>
　　<div ＞來(lái)自父組件的數(shù)據(jù)＜／ div>
</div>

props 中聲明的數(shù)據(jù)與組件data 函數(shù)return 的數(shù)據(jù)主要區(qū)別就是props 的來(lái)自父級(jí)，而data 中的是組件自己的數(shù)據(jù)，作用域是組件本身，這兩種數(shù)據(jù)都可以在模板template 及計(jì)算屬性computed和方法methods 中使用。

上例的數(shù)據(jù)message 就是通過(guò)props 從父級(jí)傳遞過(guò)來(lái)的，在組件的自定義標(biāo)簽上直接寫該props 的名稱，如果要傳遞多個(gè)數(shù)據(jù)，在props 數(shù)組中添加項(xiàng)即可。

有時(shí)候，傳遞的數(shù)據(jù)并不是直接寫死的，而是來(lái)自父級(jí)的動(dòng)態(tài)數(shù)據(jù)，這時(shí)可以使用指令v -bind來(lái)動(dòng)態(tài)綁定props 的值，當(dāng)父組件的數(shù)據(jù)變化時(shí)，也會(huì)傳遞給子組件。

  <div id="app5">
   <input type="text" v-model="text">
   <my-component5 :my-text="text"></my-component5>
  </div>
Vue.component('my-component5',{
 props: ['myText'],
 template: '<div>{{myText}}</div>'
});
var app5 = new Vue({
 el: '#app5',
 data: {
  text: '動(dòng)態(tài)傳遞父組件數(shù)據(jù)'
 }
});

注意的幾個(gè)點(diǎn)：

1.如果你要直接傳遞數(shù)字、布爾值、數(shù)組、對(duì)象，而且不使用v-bind ，傳遞的僅僅是字符串。

2.如果你想把一個(gè)對(duì)象的所有屬性作為 prop 進(jìn)行傳遞，可以使用不帶任何參數(shù)的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一個(gè) todo 對(duì)象：

1.2　對(duì)象：

當(dāng)prop 需要驗(yàn)證時(shí)，就需要對(duì)象寫法。

一般當(dāng)你的組件需要提供給別人使用時(shí)，推薦都進(jìn)行數(shù)據(jù)驗(yàn)證，比如某個(gè)數(shù)據(jù)必須是數(shù)字類型，如果傳入字符串，就會(huì)在控制臺(tái)彈出警告。

 <div id="app6">
   <input type="text" v-model="number">
   <my-component6 :my-text="number"></my-component6>
  </div>
Vue.component('my-component6',{
 props: {
  'myText':{
   type: Number, //必須是數(shù)字類型的
   required: true, //必須傳值
   default: 1 //如果未定義，默認(rèn)值就是1
  }
 },
 template: '<div>{{myText}}</div>'
});
var app6 = new Vue({
 el: '#app6',
 data: {
  number: 1
 }
});

驗(yàn)證的type 類型可以是：

• String
• Number
• Boolean
• Object
• Array
• Function

type 也可以是一個(gè)自定義構(gòu)造器，使用instanceof 檢測(cè)。

當(dāng)prop 驗(yàn)證失敗時(shí)，在開發(fā)版本下會(huì)在控制臺(tái)拋出一條警告。

二、單向數(shù)據(jù)流

Vue 2.x 與Vue l.x 比較大的一個(gè)改變就是， Vue2.x 通過(guò)props 傳遞數(shù)據(jù)是單向的了， 也就是父組件數(shù)據(jù)變化時(shí)會(huì)傳遞給子組件，但是反過(guò)來(lái)不行。

業(yè)務(wù)中會(huì)經(jīng)常遇到兩種需要改變prop 的情況，

2.1　一種是父組件傳遞初始值進(jìn)來(lái)，子組件將它作為初始值保存起來(lái)，在自己的作用域下可以隨意使用和修改。（Prop 作為初始值傳入后，子組件想把它當(dāng)作局部數(shù)據(jù)來(lái)用；）

這種情況可以在組件data 內(nèi)再聲明一個(gè)數(shù)據(jù)，引用父組件的prop ，示例代碼如下： 

 <div id="app7">
   <my-component7 :init-count="1"></my-component7>
  </div>
Vue.component('my-component7',{
 props: ['initCount'],
 template: '<div>{{count}}</div>',
 data: function(){
  return {
   count: this.initCount
  }
 }
});
var app7 = new Vue({
 el: '#app7'
});

組件中聲明了數(shù)據(jù)count ， 它在組件初始化時(shí)會(huì)獲取來(lái)自父組件的initCount ， 之后就與之無(wú)關(guān)了，只用維護(hù)c ount ， 這樣就可以避免直接操作initCount 。

2.2　prop 作為需要被轉(zhuǎn)變的原始值傳入。（Prop 作為原始數(shù)據(jù)傳入，由子組件處理成其它數(shù)據(jù)輸出。）

這種情況用計(jì)算屬性就可以了， 示例代碼如下：

  <div id="app8">
   <my-component8 :width="100"></my-component8>
  </div>
Vue.component('my-component8',{
 props: ['width'],
 template: '<div :style="style">組件內(nèi)容</div>',
 computed: {
  style: function(){
   return {
    width: this.width+'px'
   }
  }
 }
});
var app8 = new Vue({
 el: '#app8'
});

注意在 JavaScript 中對(duì)象和數(shù)組是引用類型，指向同一個(gè)內(nèi)存空間，如果 prop 是一個(gè)對(duì)象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)。

總結(jié)

以上所述是小編給大家介紹的vue組件中使用props傳遞數(shù)據(jù)的實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論