在前面我們已經了解了元件，現在我們要來多加說明 props 這個屬性
props 是由外而內傳遞資料所使用的屬性
有時候我們傳遞的資料也許是需要數值型態來計算的，這時候我們該如何來定義型別?
下面我們有一個 prop-type 的元件，動態綁著 props 傳遞過來的資料 cash

<div id="app">
  <h2>Props 的型別</h2>
  <prop-type :cash="cash"></prop-type>
</div>

<script type="text/x-template" id="propType">
<div>
  <input type="number" class="form-control" v-model="newCash">
  {{ typeof(cash)}}
</div>
</script>

<script>
Vue.component('prop-type', {
  props: ['cash'],
  template: '#propType',
  data: function() {
    return {
      newCash: this.cash
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    cash: '300'
  }
});
</script>

這個時候會發現，我們的型別會是字串，那如果我們想要在傳遞時就給它定義數值型別呢?
這個時候我們就可以改寫一下 props 的部分:

<script>
Vue.component('prop-type', {
  props: {
      cash: {
          type: Number,
      }
  },
  template: '#propType',
  data: function() {
    return {
      newCash: this.cash
    }
  }
});

var app = new Vue({
    ...
});
</script>

我們把 props 改成物件型態，並把要接受過來的 cash 也寫成物件，並給予 type 屬性為 Number
這時候數值型別就定義好了，可是會發現，畫面上還是顯示字串，這個時候我們就可以檢查 Vue 應用程式內的 data 的 cash 就會發現竟然是字串!!! 這時候把它改寫成 cash: 300 寫成數值就可以了

如果我們在元件並沒有動態綁定要傳遞的資料，如下:

<div id="app">
  <h2>Props 的型別</h2>
  <prop-type></prop-type>
</div>

這時候我們可以在 props 內的 cash 物件，多加一個 default 屬性，並給它一個數值，這個就是當元件沒有綁定要傳遞的資料，預設要給予多少數值:

<script>
Vue.component('prop-type', {
  props: {
      cash: {
          type: Number,
          default: 300,
      }
  },
  template: '#propType',
  data: function() {
    return {
      newCash: this.cash
    }
  }
});

var app = new Vue({
    ...
});
</script>

另外一種情況是靜態與動態傳入數值的差異性，如下:

<div id="app">
  <h2 class="mt-3">靜態與動態傳入數值差異</h2>
  <prop-type cash="300"></prop-type>
</div>

如果我們是採用靜態的方式直接傳入數值，會發現型態仍然是字串，但如果我們把它改成動態的:

<div id="app">
  <h2 class="mt-3">靜態與動態傳入數值差異</h2>
  <prop-type :cash="300"></prop-type>
</div>

即在 cash 加上 : (v-bind)
就會發現會自動轉型成數值傳遞了，這是比較值得注意的一點