首页 文章

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

提问于
浏览 次
0

当我在组件中已有一个组件时，如何指定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使用了 . 我该如何将两者结合起来？ （或许，是否有一种不同的，更好的方式来思考这整个问题？）

vue.js

1 回答

  • 2

    我有一点困难，但如果你想在同一个事件上运行两个函数，你可以在一个函数中做两件事 .

    @input="update"

    然后像：

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

    但是，如果你拥有的代码真的是你想要做的，你可以这样做：

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

    在评论中讨论了一下之后 . 您可以将自定义回调作为属性传递，如果您只是一种方法来解决这个问题：https://jsfiddle.net/crswll/3xwmgpom/

    回复于

相关问题