Vue是一种流行的JavaScript框架，它可以帮助您快速构建复杂的Web应用程序。Vue提供了许多有用的指令和组件，其中包括数字输入组件。

Vue.component('number-input', {
  template: `
    

      
    
  `,
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    updateValue: function(value) {
      var parsedValue = parseFloat(value);
      if (!isNaN(parsedValue)) {
        this.$emit('input', parsedValue);
      }
    }
  }
});

new Vue({
  el: '#app',
  data: {
    quantity: 1
  }
});

以上代码为一个基本的数字输入组件，其中包含input元素和一个updateValue方法，该方法在输入值更改时被调用。组件使用props接收一个名为“value”的默认值，并在组件的template中使用它来绑定input元素的值。当用户更改值时，该组件将将新值通过this.$emit('input', parsedValue)发送回父组件。

使用数字输入组件很简单。只需在Vue实例中设置一个数据值，并将其绑定到数字输入组件的value prop上即可。

  
  {{ quantity }}

在上面的代码中，我们在Vue实例中设置了“quantity”数据值，并将它绑定到数字输入组件的v-model指令上。这使我们能够在父组件中实时更新所选数量，并将其同步到我们的数字输入组件和{{ quantity }}绑定的元素中。