vue 自定義input組件

<div id="app">
    <input-number v-model="val"></input-number>
    <p>{{val}}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    val: 5
  }
})

Vue.component('input-number', {
  template: `
    <div class="input-number">
      <input type="text" v-model.number="currentValue"/>
    </div>
  `,
  data: function () {
    return {
      currentValue: this.value
    }
  },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },

  watch: {
    currentValue: function (val) {this.$emit('input', val)
    }
  }
})