vue.js 中的事件处理程序和组件

Question

当我在组件中已经有一个更改/输入处理程序时，如何指定一种更改/输入处理程序供 vue.js 中的组件使用？我有一个非常简化的文本输入，类似于：

Vue.component('text-input', {
template: '\
<span>\
  $\
  <input\
    ref="input"\
    v-bind:value="value"\
    v-on:input="updateValue($event.target.value)"\
  >\
   </span>\
  ' ,
props: ['value'],
methods: {
    updateValue: function (value) {
        this.$emit('input', value);
    },
    uppercase:function(value){
       return value.toUpperCase();
    }
}
});

我会这样使用它：

<text-input v-model="name"></text-input>

它工作正常，并且使用事件系统（使用 $emit）正确更新。但是现在我想将输入的值转换为大写，所以大概想在我的“文本输入”组件中传入一个输入处理程序，它是方法的名称，例如“大写”。所以我会有这个：

<text-input v-model="name" @input="uppercase"></text-input>

但在我的组件中，@input 已被 updateValue 使用。我怎样才能将两者结合起来？ （或者，也许，有没有一种不同的更好的方式来思考整个问题？）

Answer 1

我有点难以理解，但如果您想在同一个事件上运行两个函数，您可以在一个函数中执行两件事。

@input="update"

然后是这样的：

update: function (event) {
  this.updateValue(event.target.value)
  this.somethingElse()
}

但是，如果您拥有的代码确实是您想要做的，您可以这样做：

this.$emit('input', this.uppercase(value))

在 cmets 中讨论了更多内容之后。如果您愿意，可以将自定义回调作为属性传递并调用它而不是默认值。以下是一种解决方法的简单介绍：https://jsfiddle.net/crswll/3xwmgpom/