vue props對象 (validator自定義函數)

用于接收來自父元件的資料（子元件期待獲得的資料）

類型：字元串數組或者object

validator自定義函數

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: {
      type: String,
      validator: function (t) {
        // 這個值必須比對下列字元串中的一個
        return t === 'fade' || t === 'slide'
      },
      defalut:'slide'
    }
           

 數組：props: ['size', 'myMessage']

對象：

 props: {

    // 隻檢測類型

    height: Number,

    // 檢測類型 + 其他驗證

    age: {

      type: Number,

      default: 0,

      required: true,

      validator: function (value) {

        return value >= 0

      }

    }

  }

HTML 特性是不區分大小寫的。是以，當使用的不是字元串模闆，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名：

父元件：

1. <!-- kebab-case in HTML -->

2. <child my-message="hello!"></child>

子元件：

// camelCase in JavaScript

props: ['myMessage'],

#動态Prop

要動态地綁定父元件的資料到子模闆的 props需要使用v-bind，這樣每當父元件的資料變化時，該變化也會傳導給子元件。

#字面量文法vs動态文法 

(字面量分為字元串字面量(string literal )、數組字面量(array literal)和對象字面量(object literal)，另外還有函數字面量(function literal)。)

父元件：

<!-- 傳遞了一個字元串 "1" -->

<comp some-prop="1"></comp>

=右邊是字元串”1”而不是number。如果想要傳遞一個number，需要使用v-bind，進而讓它的值被當作js表達式計算

<!-- 傳遞實際的 number -->

<comp v-bind:some-prop="1"></comp>

Prop中的資料

.prop 作為初始值傳入後，子元件想把它當作局部資料來用；定義一個局部變量，并用 prop 的值初始化它：

子元件：

props: ['initialCounter'],

data: function () {

return { counter: this.initialCounter }

}

 2.prop 作為初始值傳入，由子元件處理成其它資料輸出。

定義一個計算屬性，處理 prop 的值并傳回。

子元件：

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

}

注意在 JavaScript 中對象和數組是引用類型，指向同一個記憶體空間，如果 prop 是一個對象或數組，在子元件内部改變它會影響父元件的狀态。

#prop驗證

子元件：

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

 }

 }

}

注意 props 會在元件執行個體建立之前進行校驗，是以在 default 或 validator 函數裡，諸如 data、computed 或 methods 等執行個體屬性還無法使用。

#非父子元件通信

有時候兩個元件也需要通信 (非父子關系)。在簡單的場景下，可以使用一個空的 Vue 執行個體作為中央事件總線：

var bus = new Vue()
           

// 觸發元件 A 中的事件
bus.$emit('id-selected', 1)
// 在元件 B 建立的鈎子中監聽事件
bus.$on('id-selected', function (id) {
// ...
})