javascript - 如何从 Vue.js 功能组件发出事件？

Question

正如问题的标题，this 上下文在功能组件中不可用。那么，如果我必须发出一个事件，我该怎么做呢？

例如下面的代码片段:

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

我的功能组件没有 this 上下文，因此 $emit 不可用。我怎样才能冒泡这个事件？

Answer 1

子组件

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

See it in action on codesandbox

Do you want to emit the event from the vue instance?

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

See it also a sandbox example here