Vue $将参数传递给已经有参数的函数

Posted 2021-04-06

我在我的组件中有这个：

template: <input @blur="$emit('customEvent', arg1)" v-model="arg1">

这在我的html模板中：

<component @customEvent="method1(arg2)"></component>

我需要为arg2函数提供一个参数（method1()），但我还需要从arg1获取$emit()。

我试过这个（进入Vue实例）：

method1(arg2, arg1) {
      console.log("This is the arg2: " + arg2);
      console.log("This is the arg1: " + arg1);
    }

当然，我试图扭转他们，不工作，arg1is没有通过，但更换。

我知道它必须有一个命名空间（也许像arg1=arg1），但我没有找到这样的东西。

答案

它可以通过将$event传递给方法来工作。

$event将是您在emit函数中传递的有效负载。当你做$emit('customEvent', arg1)时，arg1将作为$event传递给@customEvent。

<component @customEvent="method1($event, arg2)"></component>

在方法中：

method1(arg1, arg2) {
  console.log("This is the arg2: " + arg2);
  console.log("This is the arg1: " + arg1);
}

概念证明：https://jsfiddle.net/jacobgoh101/e8a5k3ph/1/