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'组件中传入一个输入处理程序，该处理程序是方法的名称，例如'uppercase'。所以我会这样：

<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))

在评论中再讨论一下。您可以将自定义回调作为属性传递，如果您喜欢并调用它而不是默认值。这是解决问题的一种方法：https://jsfiddle.net/crswll/3xwmgpom/

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

1 个答案: