注意點一

當在組件上傳入一個普通的字符串時，我們可以直接這樣寫：

<one name="張三"></one>

需要注意的是，當我們想要傳入數字時，我們需要使用v-bind綁定一個數字，否則無法識別數字，vue會認為你傳入的是一個字符串數字。

特殊的值包括：向字符鍵傳這些類型的數據時，都需要使用v-bind來告訴vue,我們傳輸的是靜態的值。

• 數字
• 布爾值
• 數組
• 對象

   <one name="張三" :age="1"></one>

注意點二

當我們想要把一個對象的所有屬性傳給子組件時，我們可以這樣寫：

//要傳輸的對象
post: { id: 1, title: 'My Journey with Vue' }
//直接使用v-bind，將post對象的所有屬性傳遞給子組件
<one v-bind='post'> </one>

子組件接收：

//直接接受父組件傳過來的對象中的屬性名即可
 props: ["id", "title"],

注意點三：單項數據流

所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態，從而導致你的應用的數據流向難以理解。

額外的，每次父級組件發生變更時，子組件中所有的 prop 都將會刷新為最新的值。這意味著你不應該在一個子組件內部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發出警告。

這里有兩種常見的試圖變更一個 prop 的情形：

• 這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數據來使用。 在這種情況下，最好定義一個本地的 data property 并將這個 prop 用作其初始值：

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

• 這個 prop 以一種原始的值傳入且需要進行轉換。 在這種情況下，最好使用這個 prop 的值來定義一個計算屬性：

  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase()
    }
  }

注意在 JavaScript 中對象和數組是通過引用傳入的，所以對于一個數組或對象類型的 prop 來說，在子組件中改變變更這個對象或數組本身將會影響到父組件的狀態。

注意點四

在使用組件時，如果我們在上面書寫非props屬性，那個這些屬性會作為組件根元素上的自定義屬性。 如果組件根元素上有同樣屬性，那個會被覆蓋掉。使用組件時傳入的值會作為最終的屬性值。

class?和?style?attribute 會稍微智能一些，即兩邊的值會被合并起來，從而得到最終的值。

如果我們不想讓要這種默認將非props屬性添加到組件的根元素上，我們可以在組件的選項中配置inheritAttrs: false。設置完以后非props屬性將不在默認添加到根元素上。

其次，我們還可以結合$attrs,就可以手動決定這些非Props屬性會被賦予哪個元素。

例如：可以將所有的屬性賦值到標簽中。

<template>
  <div class="one">
    <span v-bind="$attrs"></span>
  </div>
</template>

總結