Vue: 带有多个参数的 $emit 使用 $event 使用内联侦听器丢失数据

创建于 2017-04-26 · 3评论 · 资料来源: vuejs/vue

版本

2.2.6

转载链接

https://jsfiddle.net/psycketom/50wL7mdz/29927/

重现步骤

组件为有效载荷发出多个参数： $emit('event', first, second, arbitrary) ，根据文档。
父级通过内联语句@event="listener($event)"监听事件。
请注意侦听器如何没有获得完整的有效负载，而只有第一个值。

什么是预期？

完整的事件负载，可以是数组或其他方式。

实际发生了什么？

仅传递第一个值。

我通过使用v-for创建一个组件列表来解决这个问题，侦听一个事件，我不得不将index参数传递给侦听器： @event="listener(index, $event) 。

也许我的用例旨在以不同的方式解决（绑定数据属性？！），如果是这样，我不介意一些指导。

资料来源

tomsseisums

👍10

最有用的评论

使用arguments ： https :

请注意，在使用*.vue组件时会转换扩展语法，但如果使用浏览器内编译则不会。

yyx990803 于 2017-04-27

👍92 ❤14 🎉12 🚀6 😄4 😕2 👎2 👀1

所有3条评论

使用arguments ： https :

请注意，在使用*.vue组件时会转换扩展语法，但如果使用浏览器内编译则不会。

yyx990803 于 2017-04-27

👍92 ❤14 🎉12 🚀6 😄4 😕2 👎2 👀1

...arguments还在为人们工作吗？当我运行@myevent="$emit('myevent', ...arguments)"以重新发出和事件时，我在控制台TypeError: "vm is undefined"使用最新的 vue-template-compiler 和 vue 收到错误。

这是我的转译代码的一部分，它是错误的来源

            on: {
              myevent: function($event) {
                var i = arguments.length,
                  argsArray = Array(i)
                while (i--) argsArray[i] = arguments[i]
                return _vm.$emit.apply(
                  void 0,
                  ["myevent"].concat(argsArray)
                )
              }
            }

这是 Vue 代码中实际在第 5 行vm._events[lowerCaseEvent]上抛出 TypeError 的部分。我认为这是因为上面的void 0将undefined设置vm下面的

Vue.prototype.$emit = function (event) {
    var vm = this;
    if (process.env.NODE_ENV !== 'production') {
      var lowerCaseEvent = event.toLowerCase();
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          "Event \"" + lowerCaseEvent + "\" is emitted in component " +
          (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
          "Note that HTML attributes are case-insensitive and you cannot use " +
          "v-on to listen to camelCase events when using in-DOM templates. " +
          "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
        );
      }
    }
    var cbs = vm._events[event];
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs;
      var args = toArray(arguments, 1);
      var info = "event handler for \"" + event + "\"";
      for (var i = 0, l = cbs.length; i < l; i++) {
        invokeWithErrorHandling(cbs[i], vm, args, vm, info);
      }
    }
    return vm
  };

rightaway 于 2020-05-01

👍6

@yyx990803在尝试使用 ...arguments 时，我看到与@rightaway相同的错误 - 是否有一些新的魔法可以使用，或者这确实是一种回归？

bompus 于 2020-05-29

👍1

此页面是否有帮助？

0 / 5 - 0 等级