Props 特性，由外向內的資料傳遞

元件與元件之間的資料都是各個獨立的，所以才不會互相干擾，如果遇到需要由父層傳遞資料給子層的時候，我們可以使用 props，讓我們來看看下面的範例：

<div id="app">
  <button-component :message="msg"></button-component>
</div>

<script type="text/x-template" id="buttonTemplate">
    <div>
      <button @click="logOut(message)">Click Me</button>
    </div>
</script>

Vue.component('button-component', {
    template: '#buttonTemplate',
    props: ['message'],
    methods: {
      logOut (message) {
        alert(message);
      }
    }
})

new Vue({
  el: '#app',
  data: {
      msg: 'Hello Vue',
  }
})

這裡如果還看不太懂元件是如何建立的，建議先往前一篇看再熟悉一下會比較好，這裡我們可以看到元件內有個 props 的屬性，是由外層的 msg 傳遞到內層的 message 上，這樣就可以將外層資料傳遞到內層囉！

<div id="app">
  <!-- 動態傳遞 -->
  <button-component :message="msg"></button-component>
  <!-- 靜態傳遞 -->
  <button-component message="Hello World"></button-component>
</div>

然後這裡再介紹另一種傳遞方式，也是將資料傳到元件上，但是第二個與第一個不同的是他的資料是直接寫死在元件上的，而第一個則是由外層動態傳遞進元件裡的，而 props 只能由父層傳遞資料給子層，這就是先前提到的 Props in。

修正單向資料傳遞的錯誤

這裡我們來提一點使用 props 該注意的事項，先來看看下面的範例：

<div id="app">
  <!-- 動態傳遞 -->
  <button-component :message="msg"></button-component>
  
</div>

<script type="text/x-template" id="buttonTemplate">
  <div>
    <button @click="logOut(message)">Click Me</button>
    <input type="text" v-model="message">
  </div>
</script>

Vue.component('button-component', {
  template: '#buttonTemplate',
  props: ['message'],
  methods: {
    logOut (message) {
      alert(message);
    }
  }
})

new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue',
  }
})

在這裡我新增了一個輸入框，他的值會跟 message 綁定，這時你應該很熟悉，沒錯，這就是雙向綁定的用法，當我修改輸入框的內容後再按下按鈕，你會發現 alert 的內容也變了，但是如果打開開發者工具( F12 的 console )看你會發現當你在輸入的時候，是會一直跳出錯誤的，這是因為它不希望你反向去改寫 props 所傳進來的資料，修正方法如下：

<input type="text" v-model="newMessage">

Vue.component('button-component', {
  template: '#buttonTemplate',
  props: ['message'],
  methods: {
    logOut (message) {
      alert(message);
    }
  },
  data () {
    return {
      newMessage: this.message
    }
  }
})

我們新增一個 data 並在裡面新建一個變數去接收外部傳來的 props，這時再去輸入框修改內容就不會出現錯誤囉！

Props 的型別

如果我們沒有特別定義 props 所傳入的資料的型別的話，就都會是字串的型別，但有時我們如果使用字串去做計算，那可能會出錯，所以這裡教各位如何定義 props 傳入的資料的型別，來看看下面的範例：

<div id="app">
  <!-- 動態傳遞 -->
  <button-component :new-cash="cash"></button-component>
</div>

<script type="text/x-template" id="buttonTemplate">
  <div>
    <input type="number" v-model="newCash">
    {{typeof(newCash)}}
  </div>
</script>

Vue.component('button-component', {
  template: '#buttonTemplate',
  props: {
    newCash: {
      type: Number
    }
  },
})

new Vue({
  el: '#app',
  data: {
      cash: 100,
  }
})

這就是定義 props 所傳入的資料的型別的方式，如果傳入的是字串的話，就會出現錯誤的訊息，這樣就可以馬上除錯囉！

那麼，明天再見囉！