vuejs prop的用法是什麼

vuejs prop的用法：1、使用Prop傳遞資料，語句如「<child message="hello!"></child>」；2、用v-bind動態繫結props的值到父元件的資料中等等。

本文操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

Vuejs Prop基本用法

一、使用Prop傳遞資料

元件範例的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接參照父元件的資料。可以使用props把資料傳給子元件。

prop是父元件用來傳遞資料的一個自定義屬性。子元件需要顯示的地用props選項宣告」prop」

Vue.component('child',{
    props:['message'],
    template:'<span>{{ message }}</span>'
})

然後向它傳入一個普通字串：

<child message="hello!"></child>

結果：

hello!

二、camelCase vs.kebab-case

html不區分大小寫。當使用非字串模板時，prop的名字形式會從camelCase轉為kebab-case（短橫線隔開）：

//camelCase
Vue.component('child',{
    props:['myMessage'],
    template:'<span>{{ message }}</span>'
})

//kebab-case
<child my-message="hello!"></child>

再次說明，如果你是用字串模板，不用在意這些限制。

三、動態Prop

類似於用v-bind繫結HTML特性到一個表示式，也可以用v-bind動態繫結props的值到父元件的資料中。每當父元件的資料變化時，該變化也會傳導給子元件。

<div>
    <input v-model="parrentMsg">
    <br>
    <child v-bind:my-message="parrentMsg"></child>
</div>

使用v-bind的縮寫語法通常更簡單：

<child :my-message="parrentMsg"></child>

四、字面量語法vs動態語法

因為它是一個字面prop ，它的值以字串 "1" 而不是以實際的數位傳下去。如果想傳遞一個實際的 JavaScript 數位，需要使用 v-bind ，從而讓它的值被當作 JavaScript 表示式計算：

五、單項資料流

prop是單項繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。這是為了防止子元件無意修改了父元件的狀態——這會讓應用的資料流難以理解。同時，這也很好理解，父元件是子元件的高度抽象，表示子元件的共有部分，一個元件的資料改變並不會改變其抽象，然而其抽象的改變卻代表著所有子元件的改變。

另外，每次組漸漸更新時，子元件的所有prop都會更新為最新值。這意味著你不應該在子元件內部改變prop。如果你這麼做了，Vue會在控制檯給出警告。

通常有兩種改變prop的情況：

1.prop作為初始值傳入，子元件之後只是將它的初始值作為本地資料的初始值使用；

2.prop作為需要被轉變的原始值傳入。

更確切地說這兩種情況是：

a.定義一個區域性data屬性，並將prop的初始值作為區域性資料的初始值。
「`
props: [‘initialCounter’],
data: function () {
return { counter: this.initialCounter}
}
    b.定義一個 computed 屬性，此屬性從 prop 的值計算得出。
   ```
    props: ['size'],
    computed: {
        normalizedSize: function () {
         return this.size.trim().toLowerCase()
     }
    }

六、Prop驗證

元件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發出警告。當元件給其他人使用時這很有用。

prop 是一個物件而不是字串陣列時，它包含驗證要求：

Vue.component('example', {
  props: {
    // 基礎型別檢測 （`null` 意思是任何型別都可以）
    propA: Number,
    // 多種型別
    propB: [String, Number],
    // 必傳且是字串
    propC: {
      type: String,
      required: true
    },
    // 數位，有預設值
    propD: {
      type: Number,
      default: 100
    },
    // 陣列／物件的預設值應當由一個工廠函數返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type可以是下面的原生構造器：

* String

* Number

* Boolean

* Function

* Object

* Array

type也可以是一個自定義構造器，使用instanceof檢測。當prop驗證失敗了，如果使用的是開發版本會丟擲一條警告。