Vue: $ emit с несколькими аргументами теряет данные со встроенным слушателем, использующим $ event

Созданный на 26 апр. 2017 · 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://jsfiddle.net/50wL7mdz/30115/

Обратите внимание, что синтаксис распространения будет перенесен при использовании компонентов *.vue , но не при компиляции в браузере.

yyx990803 27 апр. 2017

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

Все 3 Комментарий

Используйте arguments : https://jsfiddle.net/50wL7mdz/30115/

yyx990803 27 апр. 2017

👍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, которая фактически вызывает ошибку TypeError в 5-й строке vm._events[lowerCaseEvent] . Я думаю, это из-за того, что 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 1 мая 2020

👍6

@ yyx990803 Я вижу ту же ошибку, что и @rightaway, когда пытаюсь использовать ... аргументы - есть ли какое-то новое волшебство, которое можно использовать, или это действительно регресс?