vue組件詳解（二）——使用props傳遞數據

在 Vue 中，父子組件的關係能夠總結爲 props向下傳遞，事件向上傳遞。父組件經過 props 給子組件下發數據，子組件經過事件給父組件發送消息。看看它們是怎麼工做的。

 1、基本用法

組件不單單是要把模板的內容進行復用，更重要的是組件間要進行通訊。

在組件中，使用選項props 來聲明須要從父級接收的數據， props 的值能夠是兩種， 一種是字符串數組，一種是對象。

1.1　字符串數組：

       <div id="app4">
            <my-component4 message="數據來自父組件"></my-component4>
        </div>

Vue.component('my-component4',{
    props: ['message'],
    template: '<div>{{message}}</div>'
});

var app4 = new Vue({
    el: '#app4'
});

渲染後的結果爲：
<div id= 」 app4」>
　　<div ＞來自父組件的數據＜／ div>
</div>

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

上例的數據message 就是經過props 從父級傳遞過來的，在組件的自定義標籤上直接寫該props 的名稱，若是要傳遞多個數據，在props 數組中添加項便可。

 

有時候，傳遞的數據並非直接寫死的，而是來自父級的動態數據，這時可使用指令v -bind來動態綁定props 的值，當父組件的數據變化時，也會傳遞給子組件。

        <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: '動態傳遞父組件數據'
    }
});

注意的幾個點：

1.若是你要直接傳遞數字、布爾值、數組、對象，並且不使用v-bind ，傳遞的僅僅是字符串。

2.若是你想把一個對象的全部屬性做爲 prop 進行傳遞，可使用不帶任何參數的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一個 todo 對象：

 

1.2　對象：

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

通常當你的組件須要提供給別人使用時，推薦都進行數據驗證，好比某個數據必須是數字類型，若是傳入字符串，就會在控制檯彈出警告。

        <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, //必須是數字類型的
          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 驗證失敗時，在開發版本下會在控制檯拋出一條警告。

 

2、單向數據流

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

業務中會常常遇到兩種須要改變prop 的狀況，

2.1　一種是父組件傳遞初始值進來，子組件將它做爲初始值保存起來，在本身的做用域下能夠隨意使用和修改。（Prop 做爲初始值傳入後，子組件想把它看成局部數據來用；）

這種狀況能夠在組件data 內再聲明一個數據，引用父組件的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'
});

組件中聲明瞭數據count ， 它在組件初始化時會獲取來自父組件的initCount ， 以後就與之無關了，只用維護c ount ， 這樣就能夠避免直接操做initCount 。

 

2.2　prop 做爲須要被轉變的原始值傳入。（Prop 做爲原始數據傳入，由子組件處理成其它數據輸出。）

這種狀況用計算屬性就能夠了， 示例代碼以下：

        <div id="app8">
            <my-component8 :width="100"></my-component8>
        </div>

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

注意在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，若是 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。