Как создать событие из функционального компонента Vue.js?

Question

Как заголовок вопроса, контекст this недоступен в функциональном компоненте. Так что, если мне нужно создать событие, как я могу это сделать?

Например, в следующем фрагменте кода:

<template functional>
    <div>
        <some-child @change="$emit('change')"></some-child>
    </div>
</template>

Мой функциональный компонент не имеет this контекста и, следовательно, $emit недоступен. Как я могу вспомнить это событие?

Answer 1

Если вы хотите условно передать прослушиватель событий, вы можете сделать это внутри шаблона функционального компонента следующим образом:

v-on="listeners.change ? { change: listeners.change } : null"

Здесь обсуждается проблема условного присоединения слушателей здесь

Answer 2

дочерний компонент

<template functional>
  <button @click="listeners['custom-event']('message from child')">
    Button from child
  </button>
</template>

Родительский компонент

<template>
  <div>
    <child-component @custom-event="call_a_method" />
  </div>
</template>

См. Это в действии на коды andbox

Хотите отправить событие из экземпляра vue?

export default {
  functional: true,
  render(createElement, { listeners }) {
    return createElement(
      "button",
      {
        on: {
          click: event => {
            const emit_event = listeners.event_from_child;
            emit_event("Hello World!Is this the message we excpected? :/");
          }
        }
      },
      "Pass event to parent"
    );
  }
};

Смотрите также пример песочницы здесь

Answer 3

Это объясняется в документации Передача атрибутов и событий дочерним элементам / компонентам :

Если вы используете функциональные компоненты на основе шаблонов, вам также придется вручную добавлять атрибуты и прослушиватели. Поскольку у нас есть доступ к содержимому отдельного контекста, мы можем использовать data.attrs для передачи любых атрибутов HTML и listeners (псевдоним для data.on) для передачи любых прослушивателей событий.

На самом базовом уровне вы можете делегировать всех слушателей следующим образом:

<some-child v-on="listeners"></some-child>

Если вы хотите привязать только слушателя change, вы можете сделать:

<some-child @change="listeners.change"></some-child>

но произойдет сбой, если listeners.change не определено / пусто (не предоставляется функциональному компоненту).

Если вам нужно справиться с ситуацией, когда нет change слушателя, тогда вы можете сделать эту мерзость:

<some-child @change="listeners.change || (() => {})"></some-child>

в противном случае вы должны были бы решить, написав функцию рендеринга вручную, поскольку я не думаю, что можно условно назначить слушателя change для <some-child> в шаблоне функционального компонента. (Или, может быть, вы можете? Я не уверен.)