篇一、組件通信（父級傳值給子組件 props ）

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
    }
  }
}