Vue 事件处理程序的可组合函数

我正在使用 Vue 2.0、ES6、Webpack。

我有一个组件（我们称之为Parent）和几个孩子（我们称之为text-input每个）。每一个text-input发出一个名为的事件change每一个都应该改变 Parent 内部的一个不同的属性。比方说Parent有一个名为info和里面info我有姓名、电子邮件等。

我想要完成的是使用与我的相同的功能设置正确的属性（名称，电子邮件，...）@change option.

<text-input
   @change="alterProperty('name')">  
 </text-input>
 <text-input
   @change="alterProperty('email')">  
 </text-input>

My Parent会有这个方法：

alterProperty (property) {
  return (changeValue) => {
    this.info[property] = changeValue
  }
}

到目前为止，什么都没有，我无法让它工作，也许是 Vue 处理事情的方式有问题，我不知道。如果有人知道这件事，我很感激你的帮助。

Thanks

请检查这个 jsFiddle 示例：https://jsfiddle.net/mani04/2mmbsyy3/ https://jsfiddle.net/mani04/2mmbsyy3/

它的工作原理完全符合您的预期。这是我的使用方法text-input成分：

<text-input :value="userInfo.name" @change="alterProperty('name', $event)"></text-input>

Note: alterProperty is an 内联方法也就是直接调用的@change事件处理程序。所以它不会得到默认值$event参数 - 携带子组件参数的特殊变量，除非包含它。在您的代码中，这是缺失的部分。

Ref: https://vuejs.org/guide/events.html#Methods-in-Inline-Handlers https://vuejs.org/guide/events.html#Methods-in-Inline-Handlers

在示例 jsFiddle 实现中，$event只是来自子组件的事件参数，而不是 DOMevent。我的 alterProperty 方法（在父组件中）的工作原理如下：

alterProperty: function(propToChange, newValue) {
    this.userInfo[propToChange] = newValue;
}

jsFiddle 还会输出父组件上的对象，该对象会按预期进行修改。

编辑：附加说明

您的子组件不应绑定this.value直接到您的input元素，如this.value通过 props 传递。如果您尝试这样做，您将收到类似以下的控制台错误消息：

[Vue warn]：避免直接改变 prop...

为了避免这种情况，我使用了本地计算属性 -textFieldValue，它有它的 getter 和 setter 方法。而 getter 只是返回this.value，设置者是发送change事件返回父组件，无需触摸this.value这是通过 props 传递的。