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

為臺江等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及臺江網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、臺江網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

 一、基本用法

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

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

1.1　字符串數(shù)組：

  

   
  
Vue.component('my-component4',{
 props: ['message'],
 template: '
{{message}}
'
});
var app4 = new Vue({
 el: '#app4'
});

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

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ù)變化時，也會傳遞給子組件。

  

   
   
  
Vue.component('my-component5',{
 props: ['myText'],
 template: '
{{myText}}
'
});
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ù)字類型，如果傳入字符串，就會在控制臺彈出警告。

 

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

驗證的type 類型可以是：

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

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

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

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

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

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

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

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

 

   
  
Vue.component('my-component7',{
 props: ['initCount'],
 template: '
{{count}}
',
 data: function(){
  return {
   count: this.initCount
  }
 }
});
var app7 = new Vue({
 el: '#app7'
});

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

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

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

  

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

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

總結(jié)

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