props介紹

在vue中，元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用 props 把資料傳給子元件。

“prop”是元件資料的一個欄位，期望從父元件傳下來。子元件需要用 props 選項 宣告 props：

Vue.component('child', {
  // 宣告 props
  props: ['message'],
  // 就像 data 一樣，prop 可以用在模板內
  // 同樣也可以在 vm 例項中像 “this.message” 這樣使用
  template: '<span>{{ message }}</span>'
 

})

然後向它傳入一個普通字串：

<child message="hello!"></child>

結果顯示hello!

props使用：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

html：

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

輸出：hello！

父子元件的資料繫結：
html:

<div>
  <input v-model="parentMsg">
  <br>
  <child :my-message="parentMsg"></child>
</div>

js:

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

注意，props傳遞數字時，需要使用v-bind:
如果是下面這樣：

<!-- 傳遞了一個字串"1" -->
<comp some-prop="1"></comp>

實際上傳遞了一個數字1，應該是：

<!-- 傳遞實際的數字 -->
<comp v-bind:some-prop="1"></comp>

單向資料流：

prop 是單向繫結的：當父元件的屬性變化時，將傳導給子元件，但是不會反過來。
另外，每次父元件更新時，子元件的所有 prop 都會更新為最新值。這意味著你不應該在子元件內部改變 prop 。

通常有兩種改變 prop 的情況：
1、prop 作為初始值傳入，子元件之後只是將它的初始值作為本地資料的初始值使用；確切的說：定義一個區域性 data 屬性，並將 prop 的初始值作為區域性資料的初始值。

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

2、prop 作為需要被轉變的原始值傳入。定義一個 computed 屬性，此屬性從 prop 的值計算得出。

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

注意：在 JavaScript 中物件和陣列是引用型別，指向同一個記憶體空間，如果 prop 是一個物件或陣列，在子元件內部改變它會影響父元件的狀態。