vue中關於prop

組件之間的項目通信在vue中十分常見，父組件的數據傳到子組件需要prop的支持，我們來看下prop

1.html的特性名大小寫不敏感，瀏覽器會把所有大寫字母解釋為小寫字母，使用dom模板時，使用等價的kabad-case命名

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

2.prop的類型    prop可以在父組件引入的時候傳入很多類型的值

常見的是字符串數組形式

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但是，通常你希望每個 prop 都有指定的值類型。這時，你可以以對象形式列出 prop，這些屬性的名稱和值分別是 prop 各自的名稱和類型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

這不僅為你的組件提供了文檔，還會在它們遇到錯誤的類型時從瀏覽器的 JavaScript 控制台提示用戶。

3.靜態傳值和動態傳值

直接傳一句話，或者使用v-bind綁定一個屬性名，動態賦值，具體可以參考官網。

4.單向數據流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的數據流向難以理解。額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會刷新為最新的值。這意味着你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制台中發出警告。

這是官方的解釋，我自己寫demo試了一下，如果是基礎類型，比如Number、String這些類型，在子組件中修改值，修改成功，但是vue發出警告，因為是單向數據流，所以父組件的值不會改變。如果是引用類型數組和對象，vue沒有警告，子組件和父組件的值同時發生改變。

5.prop驗證

Vue.component('my-component', {
  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
      }
    }
  }
})

在prop驗證失敗，在控制台中有警告。