62Vue - 自定义事件（使用自定义事件的表单输入组件）

自定义事件也可以用来创建自定义的表单输入组件，使用 v-model来进行数据双向绑定。牢记：

仅仅是一个语法糖：

所以在组件中使用时，它相当于下面的简写：

所以要让组件的 v-model 生效，它必须：

• 接受一个 value 属性
• 在有新的 value 时触发 input 事件

一个非常简单的货币输入： HTML代码：

JS代码：

Vue.component('currency-input', {
  template: '\
    \
      $\
      \
    \
  ',
  props: ['value'],
  methods: {
    // Instead of updating the value directly, this
    // method is used to format and place constraints
    // on the input's value
    updateValue: function (value) {
      var formattedValue = value
        // Remove whitespace on either side
        .trim()
        // Shorten to 2 decimal places
        .slice(0, value.indexOf('.') + 3)
      // If the value was not already normalized,
      // manually override it to conform
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }
      // Emit the number value through the input event
      this.$emit('input', Number(formattedValue))
    }
  }
})