如何在Vue.js中重构重复属性

Question

假设我有一个表单和许多字段。我想为每个表单字段订阅change。我必须为每个字段添加@change="doSome"。如果我有很多字段，它会有些重复。我该如何重构呢？

Answer 1

您可以在表单标记本身上侦听更改事件，而不是侦听各个输入。

当表单中的内容发生变化时，

<form @change="doSomething">将运行函数doSomething()，例如：如果您输入输入并释放焦点

在doSomething函数中，您想要找出更改的元素。我们从输入事件提供的事件参数中获取此信息：

methods: {
  doSomething(event) {
    this.lastEvent = event.target.value;
  }
}

您可以在此Codepen example

上看到此效果

如果表单元素是组件内元素的子元素，那么：

<template>
  <div>
    <form></form>
  </div>
</template>

@change事件监听器将无法工作，因为组件上的根元素（div）上没有任何更改。

在这种情况下，我们需要添加 .native 修饰符，如下所示：@change.native="doSomething"。