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) ред

рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдореЗрд░реЗ рдЙрдкрдпреЛрдЧ рдХреЗ рдорд╛рдорд▓реЗ рдХреЛ рдЕрд▓рдЧ рддрд░реАрдХреЗ рд╕реЗ рд╣рд▓ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рд╣реИ (рдмрд╛рдзреНрдп рдбреЗрдЯрд╛ рд╡рд┐рд╢реЗрд╖рддрд╛ ?!), рдпрджрд┐ рд╣рд╛рдВ, рддреЛ рдореБрдЭреЗ рдХреБрдЫ рдорд╛рд░реНрдЧрджрд░реНрд╢рди рдирд╣реАрдВ рд╣реЛрдЧрд╛ред

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

arguments рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ: https://jsfiddle.net/50wL7mdz/30115/

рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рд╕реНрдкреНрд░реЗрдб рд╕рд┐рдВрдЯреИрдХреНрд╕ рдХреЛ *.vue рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп рдЯреНрд░рд╛рдВрд╕рдкрд╛рдЗрд▓ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛, рд▓реЗрдХрд┐рди рдпрджрд┐ рдЖрдк рдЗрди-рдмреНрд░рд╛рдЙрдЬрд╝рд░ рд╕рдВрдХрд▓рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред

рд╕рднреА 3 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

arguments рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ: https://jsfiddle.net/50wL7mdz/30115/

рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рд╕реНрдкреНрд░реЗрдб рд╕рд┐рдВрдЯреИрдХреНрд╕ рдХреЛ *.vue рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп рдЯреНрд░рд╛рдВрд╕рдкрд╛рдЗрд▓ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛, рд▓реЗрдХрд┐рди рдпрджрд┐ рдЖрдк рдЗрди-рдмреНрд░рд╛рдЙрдЬрд╝рд░ рд╕рдВрдХрд▓рди рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред

рдХреНрдпрд╛ ...arguments рдЕрднреА рднреА рд▓реЛрдЧреЛрдВ рдХреЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реИ? рдЬрдм рдореИрдВ рдкреБрди: рдЙрддреНрд╕рд░реНрдЬрди рдФрд░ рдШрдЯрдирд╛ рдХреЗ рд▓рд┐рдП @myevent="$emit('myevent', ...arguments)" рдЪрд▓рд╛рддрд╛ рд╣реВрдВ рддреЛ рдореБрдЭреЗ рдирд╡реАрдирддрдо vue-template-compiler рдФрд░ vue рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдХрдВрд╕реЛрд▓ TypeError: "vm is undefined" рдореЗрдВ рдПрдХ рддреНрд░реБрдЯрд┐ рдорд┐рд▓рддреА рд╣реИред

рдпрд╣ рдореЗрд░реЗ рдкрд╛рд░рджрд░реНрд╢реА рдХреЛрдб рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рд╣реИ рдЬреЛ рддреНрд░реБрдЯрд┐ рдХрд╛ рд╕реНрд░реЛрдд рд╣реИ

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

@ yyx990803 рдореИрдВ рдЙрд╕реА рддреНрд░реБрдЯрд┐ рдХреЛ рджреЗрдЦ рд░рд╣рд╛ рд╣реВрдВ рдЬреИрд╕реЗ @rightaway ... рддрд░реНрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░рддреЗ рд╕рдордп - рдХреНрдпрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреБрдЫ рдирдпрд╛ рдЬрд╛рджреВ рд╣реИ рдпрд╛ рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдПрдХ рдкреНрд░рддрд┐рдЧрдорди рд╣реИ?

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕