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

Question

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

例如在下面的代码片段中：

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

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

原文由 Harshal Patil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这在将 属性和事件传递给子元素/组件 的文档中进行了解释：

如果您使用基于模板的功能组件，您还必须手动添加属性和侦听器。由于我们可以访问各个上下文内容，我们可以使用 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 && listeners.change($event)"></some-child>

否则你将不得不通过手动编写渲染函数来解决，因为我认为不可能有条件地将 change 监听器分配给 <some-child> 在功能组件的模板中. （或者也许你可以？我不确定。）

原文由 Decade Moon 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

在 codesandbox 上查看它的实际效果

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

另请参阅此处的沙箱示例

原文由 Roland 发布，翻译遵循 CC BY-SA 4.0 许可协议