日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
Vue中props這些知識點，可以在來復(fù)習(xí)一下！

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

創(chuàng)新互聯(lián)建站專注于盧氏企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城建設(shè)。盧氏網(wǎng)站建設(shè)公司,為盧氏等地區(qū)提供建站服務(wù)。全流程按需定制，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

什么是 props ?

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

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

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

props 的兩個主要特點

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

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

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

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

將 props 傳遞給其他組件

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

 
 
 
    
  
  
  
  1.  
    2.

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

 
 
 
    
  
  
  
  1.  
    2.

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

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

為此，我們需要使用稍微不同的語法，因為我們希望使用 JS 表達式而不是傳遞字符串。

 
 
 
    
  
  
  
  1.  
    2.

v-bind:name="cameraName"行告訴Vue將 JS 表達式cameraName綁定到 propname。JS 表達式是 JS 的任何代碼段?？赡苁窍裎覀冊诖颂庍@樣的變量名，或更復(fù)雜的名稱。

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

 
 
 
    
  
  
  
  1.  
    2.

v-bind 可以用簡寫形式 ：

 
 
 
    
  
  
  
  1.  
    2.

添加 props

在此代碼實際起作用之前，我們需要獲取Camera組件才能實際收聽props。默認情況下，組件會忽略它們。為此，我們必須在組件定義中添加一個props部分：

 
 
 
    
  
  
  
  1. export default { 
    2.   
  
  
  2.   name: 'Camera', 
    3.   
  
  
  3.   props: ['name', 'img'], 
    4.   
  
  
  4. } 
    5.

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

 
 
 
    
  
  
  
  1. export default { 
    2.   
  
  
  2.   name: 'Camera', 
    3.   
  
  
  3.   props: { 
    4.   
  
  
  4.       name: { 
    5.   
  
  
  5.       type: String, 
    6.   
  
  
  6.       }, 
    7.   
  
  
  7.       img: { 
    8.   
  
  
  8.       type: String, 
    9.   
  
  
  9.       } 
    10.   
  
  
  10.   } 
    11.   
  
  
  11. } 
    12.

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

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

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

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

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

 
 
 
    
  
  
  
  1. export default { 
    2.   
  
  
  2.   name: 'Camera', 
    3.   
  
  
  3.   props: { 
    4.   
  
  
  4.       name: { 
    5.   
  
  
  5.       type: String, 
    6.   
  
  
  6.       }, 
    7.   
  
  
  7.       img: { 
    8.   
  
  
  8.       type: String, 
    9.   
  
  
  9.       }, 
    10.   
  
  
  10.       rating: { 
    11.   
  
  
  11.       type: Number, 
    12.   
  
  
  12.       }, 
    13.   
  
  
  13.   } 
    14.   
  
  
  14. } 
    15.

然后在 template 中顯示 rating：

 
 
 
    
  
  
  
  1.  
    2.

在外層調(diào)用：

 
 
 
    
  
  
  
  1.  
    2.

必填的 props

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

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

 
 
 
    
  
  
  
  1. export default { 
    2.   
  
  
  2.   name: 'Camera', 
    3.   
  
  
  3.   props: { 
    4.   
  
  
  4.       name: { 
    5.   
  
  
  5.       type: String, 
    6.   
  
  
  6.       required: true, 
    7.   
  
  
  7.       }, 
    8.   
  
  
  8.       img: { 
    9.   
  
  
  9.       type: String, 
    10.   
  
  
  10.       }, 
    11.   
  
  
  11.       rating: { 
    12.   
  
  
  12.       type: Number, 
    13.   
  
  
  13.       }, 
    14.   
  
  
  14.   } 
    15.   
  
  
  15. } 
    16.

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

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

默認值

對于不是每次都傳入的 props，我們可以為其，添加默認值。

 
 
 
    
  
  
  
  1. export default { 
    2.   
  
  
  2.   name: 'Camera', 
    3.   
  
  
  3.   props: { 
    4.   
  
  
  4.       name: { 
    5.   
  
  
  5.       type: String, 
    6.   
  
  
  6.       required: true, 
    7.   
  
  
  7.       }, 
    8.   
  
  
  8.       img: { 
    9.   
  
  
  9.       type: String, 
    10.   
  
  
  10.       default: '../no-camerage-found.jpg', 
    11.   
  
  
  11.       }, 
    12.   
  
  
  12.       rating: { 
    13.   
  
  
  13.       type: Number, 
    14.   
  
  
  14.       }, 
    15.   
  
  
  15.   } 
    16.   
  
  
  16. } 
    17.

前面我們通過邏輯或為img添加默認值，這次我們使用 default 屬性為img設(shè)置默認值。

同樣也需要為我們的rating設(shè)置默認值。如果沒有設(shè)置也沒有從外部傳入，我們訪問的時候就會得到undefined，這可能會給我們帶來一些問題

在模板外使用 props

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

在我們的template中，我們看到我們只需要props名稱，例如：{{rating}}。但是，在Vue組件的其他任何地方，我們都需要使用this.rating訪問我們的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來自對空格字符的編碼，因此我們可以在URL中使用它。

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

 
 
 
    
  
  
  
  1. export default { 
    2.   
  
  
  2.   name: 'Camera', 
    3.   
  
  
  3.   props: { 
    4.   
  
  
  4.       name: { 
    5.   
  
  
  5.       type: String, 
    6.   
  
  
  6.       required: true, 
    7.   
  
  
  7.       }, 
    8.   
  
  
  8.       rating: { 
    9.   
  
  
  9.       type: Number, 
    10.   
  
  
  10.       default: 0, 
    11.   
  
  
  11.       }, 
    12.   
  
  
  12.   } 
    13.   
  
  
  13. } 
    14.

然后，我們將添加一個計算屬性，該屬性將為我們生成圖像URL：

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

因為我們可以使用與常規(guī)props相同的方式來訪問此計算 props，所以我們根本不需要更改模板，并且模板可以像以前一樣保持不變：

 
 
 
    
  
  
  
  1.  
    2.

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

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

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

總結(jié)

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


名稱欄目：Vue中props這些知識點，可以在來復(fù)習(xí)一下！
文章地址：http://www.5511xx.com/article/dpohisj.html