props 用法（props寫在子元件中）

父元件

子元件

                         ****--- 番外篇 ---****

1、傳遞靜態 Prop
例：<blog-post title="My journey with Vue"></blog-post>

2、傳遞動態 Prop（可以通過 v-bind 動態賦值）
例：<blog-post :title="post.title + ' by ' + post.author.name"></blog-post>

1、 prop 用來傳遞一個初始值；

• 如果子元件接下來希望將其作為一個本地的 prop 資料來使用。在這種情況下，最好定義一個本地的 data 屬性並將這個 prop 用作其初始值：

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

2、 prop 以一種原始的值傳入且需要進行轉換。

• 在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：

props: ['size'],
computed: {
  normalizedSize: function () {
 

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

1、props驗證

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 ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}