如果你一直在閱讀有關(guān)"props"內(nèi)容，你會(huì)發(fā)現(xiàn)我們可能也一直在使用它們(即使沒(méi)有意識(shí)到)，但也許你并不完全確定它們是什么?；蛘呷绾握_使用它們，并充分利用它們。

當(dāng)你讀完這篇指南時(shí)，你就會(huì)知道成為一名高效的Vue開(kāi)發(fā)者所需要知道的關(guān)于props的一切。

在本指南中，我們將介紹關(guān)于 props 的最重要的事情：

• 什么是 props ?
• props 的兩個(gè)主要特點(diǎn)
• 如何將 props 傳遞給其他組件
• 添加 props 類型
• 添加必填的 props
• 設(shè)置默認(rèn)值

什么是 props ?

props 是我們?cè)诓煌M件之間傳遞變量和其他信息的方式。這類似于在 JS 中，我們可以將變量作為參數(shù)傳遞給函數(shù):

這里，我們將變量myMessage作為參數(shù)message傳遞給函數(shù)。在函數(shù)內(nèi)部，我們可以將該值作為message訪問(wèn)。

props的工作原理與此非常相似。我們將props傳遞給另一個(gè)組件，然后該組件可以使用該值。但是首先需要了解一些規(guī)則。

props 的兩個(gè)主要特點(diǎn)

在處理props時(shí)，有兩件事需要特別注意：

• props 通過(guò)組件樹(shù)傳遞給后代(而不是向上傳遞)
• props 是只讀的，不能修改

Vue 使用單向數(shù)據(jù)流，這意味著數(shù)據(jù)只能從父組件流向子組件，不能將數(shù)據(jù)從子對(duì)象傳遞到父對(duì)象。因?yàn)楦附M件“擁有”它傳遞的值，所以子組件不能修改它。如果只允許一個(gè)組件更改它，那么跟蹤bug就更容易了，因?yàn)槲覀兇_切地知道應(yīng)該從哪里查找。

在開(kāi)發(fā)確保沒(méi)有違反這兩條規(guī)則，開(kāi)發(fā)就會(huì)變得更容易些，出問(wèn)題也比較好找原因。接著來(lái)看看如何將 props 從一個(gè)組件傳遞到另一個(gè)組件。

將 props 傳遞給其他組件

如果希望將值從組件傳遞到子組件，這與添加HTML屬性完全相同。

<template> 
  <Camera 
    name="Sony A7RIV" 
    img="../sony-a7riv.jpg" 
  /> 
</template> 

Camera組件將使用name和img props 來(lái)渲染自身頁(yè)面。內(nèi)容大概如下：

<template> 
  <div class="camera"> 
    <h2 class="camera__name">{{ name }}</h2> 
    <img class="camera__image" :src="img" /> 
  </div> 
</template> 

在這里，我們將name渲染到h2標(biāo)記中，并使用img設(shè)置img標(biāo)記上的src屬性。

但是，如果我們將此信息存儲(chǔ)在某個(gè)位置的變量中怎么辦?

為此，我們需要使用稍微不同的語(yǔ)法，因?yàn)槲覀兿Ｍ褂?JS 表達(dá)式而不是傳遞字符串。

<template> 
  <Camera 
    v-bind:name="cameraName" 
    v-bind:img="cameraImage" 
  /> 
</template> 

v-bind:name="cameraName"行告訴Vue將 JS 表達(dá)式cameraName綁定到 propname。JS 表達(dá)式是 JS 的任何代碼段。可能是像我們?cè)诖颂庍@樣的變量名，或更復(fù)雜的名稱。

還可以使用邏輯或 img 設(shè)置圖像路徑：

<template> 
  <Camera 
    v-bind:name="cameraName" 
    v-bind:img="cameraImage || '../no-camera-found.jpg'" 
  /> 
</template> 

v-bind 可以用簡(jiǎn)寫(xiě)形式 ：

<template> 
  <Camera 
    :name="cameraName" 
    :img="cameraImage || '../no-camera-found.jpg'" 
  /> 
</template> 

添加 props

在此代碼實(shí)際起作用之前，我們需要獲取Camera組件才能實(shí)際收聽(tīng)props。默認(rèn)情況下，組件會(huì)忽略它們。為此，我們必須在組件定義中添加一個(gè)props部分：

export default { 
  name: 'Camera', 
  props: ['name', 'img'], 
} 

通常不建議這么寫(xiě)，應(yīng)該為props對(duì)象指定類型：

export default { 
  name: 'Camera', 
  props: { 
      name: { 
      type: String, 
      }, 
      img: { 
      type: String, 
      } 
  } 
} 

通過(guò)從數(shù)組到對(duì)象，我們可以指定更多的 props 細(xì)節(jié)，比如類型。我們?yōu)槭裁匆騪rops 添加類型?

在Vue中，props 可以有很多不同的類型：

• String
• Number
• Boolean (true 或者 false)
• Array
• Object

通過(guò)添加類型，我們可以設(shè)置我們期望收到的數(shù)據(jù)類型。如果我們將camera的props中的name設(shè)置為true，它將無(wú)法正常工作，因此Vue會(huì)警告我們使用錯(cuò)誤。

接著添加一個(gè)rating到我們的Camera組件中，該 rating 類型為 Number：

export default { 
  name: 'Camera', 
  props: { 
      name: { 
      type: String, 
      }, 
      img: { 
      type: String, 
      }, 
      rating: { 
      type: Number, 
      }, 
  } 
} 

然后在 template 中顯示 rating：

<template> 
  <div class="camera"> 
    <h2 class="camera__name">{{ name }}</h2> 
    <span class="camera__rating">{{ rating }}</span> 
    <img class="camera__image" src="img" /> 
  </div> 
</template> 

在外層調(diào)用：

<template> 
  <Camera 
    name="Sony A7RIV" 
    img="../sony-a7riv.jpg" 
    :rating="9" 
  /> 
</template> 

必填的 props

不是所有的 props 都是一樣的，為了使組件正常工作，其中一些要求必填的。

對(duì)于我們的Camera組件，我們肯定需要一個(gè)name，但 img 和 rating 不是必需的。

export default { 
  name: 'Camera', 
  props: { 
      name: { 
      type: String, 
      required: true, 
      }, 
      img: { 
      type: String, 
      }, 
      rating: { 
      type: Number, 
      }, 
  } 
} 

export default { name: 'Camera', props: { name: { type: String, required: true, }, img: { type: String, }, rating: { type: Number, }, }}

通過(guò)設(shè)置 required: true 要求我們的 name 是必需要傳入的，相反，required 為false 對(duì)應(yīng)的props可傳可不傳。

默認(rèn)值

對(duì)于不是每次都傳入的 props，我們可以為其，添加默認(rèn)值。

export default { 
  name: 'Camera', 
  props: { 
      name: { 
      type: String, 
      required: true, 
      }, 
      img: { 
      type: String, 
      default: '../no-camerage-found.jpg', 
      }, 
      rating: { 
      type: Number, 
      }, 
  } 
} 

前面我們通過(guò)邏輯或?yàn)閕mg添加默認(rèn)值，這次我們使用 default 屬性為img設(shè)置默認(rèn)值。

同樣也需要為我們的rating設(shè)置默認(rèn)值。如果沒(méi)有設(shè)置也沒(méi)有從外部傳入，我們?cè)L問(wèn)的時(shí)候就會(huì)得到undefined，這可能會(huì)給我們帶來(lái)一些問(wèn)題

在模板外使用 props

雖然能夠在template中使用props很棒，但是真正強(qiáng)大的功能來(lái)自于在方法、計(jì)算屬性和組件中在使用其他 JS 中使用它們。

在我們的template中，我們看到我們只需要props名稱，例如：{{rating}}。但是，在Vue組件的其他任何地方，我們都需要使用this.rating訪問(wèn)我們的props。

讓我們重構(gòu)應(yīng)用程序，以便為圖像使用標(biāo)準(zhǔn)的URL結(jié)構(gòu)。這樣，我們不必每次都將其傳遞給Camera組件，而只需從名稱中找出即可。

我們將使用以下結(jié)構(gòu)：./images/cameras/${cameraName}.jpg

因此，如果 camera 是Sony A6400，則URL將變?yōu)?/images/cameras/Sony%20A6400.jpg。%20來(lái)自對(duì)空格字符的編碼，因此我們可以在URL中使用它。

首先，我們將移除不再需要的img props

export default { 
  name: 'Camera', 
  props: { 
      name: { 
      type: String, 
      required: true, 
      }, 
      rating: { 
      type: Number, 
      default: 0, 
      }, 
  } 
} 

然后，我們將添加一個(gè)計(jì)算屬性，該屬性將為我們生成圖像URL：

并非所有字符都可以在URL中使用，因此encodeURIComponent會(huì)為我們轉(zhuǎn)換這些字符。

因?yàn)槲覀兛梢允褂门c常規(guī)props相同的方式來(lái)訪問(wèn)此計(jì)算 props，所以我們根本不需要更改模板，并且模板可以像以前一樣保持不變：

<template> 
  <div class="camera"> 
    <h2 class="camera__name">{{ name }}</h2> 
    <span class="camera__rating">{{ rating }}</span> 
    <img class="camera__image" src="img" /> 
  </div> 
</template> 

這樣，您可以在以下位置使用組件的props：

• watch 中
• 生命周期 hook
• method
• computed 中

以及組件定義中的其他任何地方!

總結(jié)

以上，這些是關(guān)于 props 的知識(shí)點(diǎn)，但是，總會(huì)有更多東西要學(xué)習(xí)。Vue 也是一個(gè)永無(wú)止境的學(xué)習(xí)過(guò)程。keep going !