如何从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>

看到它在codeandbox上的作用

您是否要从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 2

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

如果您使用基于模板的功能组件,则还必须手动添加属性和侦听器.由于我们可以访问各个上下文内容,因此我们可以使用data.attrs传递任何HTML属性和listeners(别名data.on)来传递任何事件侦听器.

在最基本的级别,您可以委托所有侦听器,如下所示:

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

如果您只想绑定change侦听器,则可以执行以下操作:

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

但如果listeners.change未定义/ null(未提供给功能组件),则会失败.

如果你需要处理没有change听众的情况,那么你可以这样做可憎:

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

否则你必须通过手工编写渲染函数来解决,因为我认为不可能有条件地将change侦听器分配到<some-child>功能组件的模板中.(或许你可以？我不确定.)