Vue 事件处理程序的可组合函数 [英] Composable functions for Vue event handlers

问题描述

我使用的是 Vue 2.0、ES6、Webpack.

I'm using Vue 2.0, ES6, Webpack.

我有一个组件(我们称之为 Parent)和几个子组件(我们称之为 text-input 每个).每个 text-input 都会发出一个名为 change 的事件，并且每个事件都应该更改 Parent 中的一个不同属性.假设 Parent 有一个名为 info 的数据，在 info 里面我有，姓名，电子邮件等.

I have one component(let's call it Parent) and few children(let's call it text-input each). Every text-input emits an event called change and each one should alter one different property inside Parent. Let's say Parent has an data named info and inside info I have, name, email, etc.

我想要完成的是使用相同的函数为我的 @change 选项设置正确的属性(姓名、电子邮件、...).

What I want to accomplish is to set the right property(name, email, ...) using the same function for my @change option.

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

我的 Parent 会有这个方法:

My Parent would have this method:

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

到目前为止，没有什么，我无法让它工作，也许是 Vue 处理事情的方式，我不知道.如果有人对此有所了解，我感谢您的帮助.

So far, nothing, I can't get this to work, maybe something in the way Vue handle things, I don't know. If anyone know something about that, I appreciate the help.

谢谢

推荐答案

请查看此 jsFiddle 示例:https://jsfiddle.net/mani04/2mmbsyy3/

Please check this jsFiddle example: https://jsfiddle.net/mani04/2mmbsyy3/

它完全按照您的预期工作.下面是我如何使用 text-input 组件:

It works precisely as you expect. Here is how I am using the text-input component:

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

注意: alterProperty 是一个内联方法，在@change 事件处理程序中直接调用.所以它不会获得默认的 $event 参数 - 携带来自子组件的参数的特殊变量，除非你包含它.在您的代码中，这是缺失的部分.

Note: alterProperty is an inline method that is directly called in the @change event handler. So it will not get the default $event parameter - the special variable that carries the arguments from child component, unless you include it. In your code, this is the missing part.

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

在示例 jsFiddle 实现中，$event 只是来自子组件的事件参数，而不是 DOM event.我的 alterProperty 方法(在父组件中)的工作方式如下:

In the sample jsFiddle implementation, the $event is only the event arguments from child component, not a DOM event. My alterProperty method (in parent component) works as follows:

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

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

The jsFiddle also outputs the object on parent component, which gets modified as expected.

附加说明

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

Your child component should not bind this.value directly to your input element, as this.value is passed via props. If you try to do that, you will get a console error messsage like:

[Vue 警告]:避免直接改变 prop...

为了避免这种情况，我使用了一个本地计算属性 - textFieldValue，它有自己的 getter 和 setter 方法.虽然 getter 只是返回 this.value，但 setter 是将 change 事件发送回父组件的人，而不触及 this.value通过 props 传递.

To avoid that, I have used a local computed property - textFieldValue, which has its getter and setter methods. While getter simply returns this.value, the setter is the one that sends the change event back to parent component, without touching this.value that is passed via props.

这篇关于Vue 事件处理程序的可组合函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！