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

Question

我在我的组件中有这个:

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);
    }

当然,我试图扭转他们,不工作,arg1不是通过,而是取代.

我知道它必须有一个命名空间(也许是类似的东西arg1=arg1),但我还没有找到这样的东西.

Answer 1

它可以通过传入$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/