[Props] vue組件間的傳值及校驗

基本用法

Prop的基本用法很簡單,只須要在子組件的Vue實例中定義該屬性並把值設爲目標屬性的數組便可數組

Vue.component('child', {
    ...
    // 接收message
    props: ['message']
    ...
 })
  • 因爲HTML中的屬性是不區分大小寫的,因此當使用DOM中的模板(HTML中)時,駝峯寫法須要轉化爲短橫線寫法。可是,若是使用字符串模板(JS中)時,不受限制,能夠隨心所欲。

Prop中的靜態和動態值

  • 在正常狀況下,通常在父組件中經過v-bind定義一個動態值,子組件經過Prop接收該值,因此,不少人認爲,Prop只能接收動態值。可是,其實Prop能夠接受靜態屬性。
/* 父組件 */
<child type="video"></child>
  /* 子組件 */
Vue.component('child', {
   ... 
  // 成功接收
   props: ['type'] 
  ...
})
  • 在示例中,父組件在子組件標籤上定義了靜態屬性type,子組件依然經過Prop拿到了靜態屬性type。

單向數據流

全部的 prop 都使得其父子 prop 之間造成了一個單向下行綁定:父組件的 Prop 的更新會向下流動到子組件中,可是反過來則不行。
這樣會防止從子組件意外改變父組件以及同級子組件的狀態,從而致使你的應用的數據流向難以理解。ide

  • 另外,每次父組件發生更新時,子組件中全部的Prop都將刷新爲最新的值。這意味着你不該該在子組件內部改變Prop,若是你這樣作了,Vue會在控制檯拋出一個警告。
    通常來講,若是子組件須要操做Prop中的值,須要將Prop中的值賦值給本地定義的屬性:
<div>
    <p>{{newMessage}}</p>
  </div> 
...
  props: ['message'],
  computed:{
    newMessage(){
      return this.message;
    }
  }
 ...

非Prop特性

  • 非Props特性是指在組件上定義了屬性,而又沒有使用Prop接受屬性。此時,子組件內不可以使用該屬性值,該屬性會直接添加到子組件的根節點上。
    好比,在一個只含有一個div的子組件上,若是我向子組件傳了一個content屬性,可是子組件不使用Prop接收content屬性,則渲染結果爲:
<div id="root">  
   <div content="hello"></div>
 </div>

Prop校驗

  • 子組件用Props接收父組件傳來的消息有多種形式:
  1. 數組形式
props: [data1, data2]

數組形式至關於直接接收消息,不作任何校驗,通常來講,不太建議使用數組形式。函數

2.簡單對象形式post

props: { data1: String, data2: Array}

簡單對象形式對父組件傳遞的值進行了類型校驗,若是傳過來的值類型不一致,控制檯會報錯。ui

3.複雜對象形式this

props: { 
  data1: {
    type: String, //設定類型
    required: true, //是否必須
    default: 'default value', //默認值  
    validator (value) {   return (value.length < 5)  } }, //校驗規則 
  data2: {  
    type: Array,
    required: true,
    default: () => ['', '', ''] 
 }}
  • 複雜對象形式的狀況下,做爲對象屬性的參數能夠寫爲對象形式,參數對象含有4個屬性,
    • type
    • required
    • default
    • validator
  • type:設定參數類型,當傳入參數類型與type不相符時,控制檯會報錯
  • required:設定參數是不是必傳,當設爲true時,不傳該參數會報錯
  • default:設定默認值,當參數類型爲複雜類型時,需使用工廠模式生成默認值,不然Vue會在控制檯拋出警告。如圖所示,就經過工廠模式生成了一個長度爲3的空數組。
  • validator:校驗器,是一個函數,擁有一個表明傳入值的形參,能夠自定義各類校驗,當返回false時,會報錯,表示沒經過校驗。

【!】 注意那些 prop 會在一個組件實例建立以前進行驗證,因此實例的屬性 (如 datacomputed 等) 在 defaultvalidator 函數中是不可用的。code

類型檢查

type 能夠是下列原生構造函數中的一個:component

String
Number
Boolean
Array
Object
Date
Function
Symbol
  • 額外的,type 還能夠是一個自定義的構造函數,而且經過 instanceof 來進行檢查確認。對象

    例如,給定下列現成的構造函數:blog

    function Person (firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
    }
  • 你可使用:
Vue.component('blog-post', {
  props: {
    author: Person
  }
})
  • 來驗證 author prop 的值是不是經過 new Person 建立的。
相關文章
相關標籤/搜索