在 Vue 中，父子組件的關系可以總結為 props向下傳遞，事件向上傳遞。父組件通過 props 給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。看看它們是怎么工作的。

 一、基本用法

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

在組件中，使用選項props 來聲明需要從父級接收的數(shù)據(jù)， props 的值可以是兩種， 一種是字符串數(shù)組，一種是對象。

1.1　字符串數(shù)組：

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

渲染后的結果為：

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

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

上例的數(shù)據(jù)message 就是通過props 從父級傳遞過來的，在組件的自定義標簽上直接寫該props 的名稱，如果要傳遞多個數(shù)據(jù)，在props 數(shù)組中添加項即可。

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

  <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: '動態(tài)傳遞父組件數(shù)據(jù)'
 }
});

注意的幾個點：

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

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

1.2　對象：

當prop 需要驗證時，就需要對象寫法。

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

 <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 //如果未定義，默認值就是1
  }
 },
 template: '<div>{{myText}}</div>'
});
var app6 = new Vue({
 el: '#app6',
 data: {
  number: 1
 }
});

驗證的type 類型可以是：

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

type 也可以是一個自定義構造器，使用instanceof 檢測。

當prop 驗證失敗時，在開發(fā)版本下會在控制臺拋出一條警告。

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

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

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

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

這種情況可以在組件data 內(nèi)再聲明一個數(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 ， 它在組件初始化時會獲取來自父組件的initCount ， 之后就與之無關了，只用維護c ount ， 這樣就可以避免直接操作initCount 。

2.2　prop 作為需要被轉變的原始值傳入。（Prop 作為原始數(shù)據(jù)傳入，由子組件處理成其它數(shù)據(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 中對象和數(shù)組是引用類型，指向同一個內(nèi)存空間，如果 prop 是一個對象或數(shù)組，在子組件內(nèi)部改變它會影響父組件的狀態(tài)。

總結

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

最新評論