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屋!