Question

我写了一个functional component来编译某些条件的表单字段。表单字段是它们自己的组件。所以我有三个级别：

<FormComponent>          // handles input events
  <FunctionalComponent>  // selects form fields
    <FormFieldComponent> // emits input events
  </FunctionalComponent>
</FormComponent>

功能组件没有this，但获取上下文对象作为render函数的参数。我能做的是使用context.data.on[eventName](event)或类似的构造。我也知道我可以直接使用事件总线或dom元素，如here所述。

这一切对我来说都很脏。功能组件中是否有this.$emit等效项？

Answer 1

感谢@RoyJ的评论，我能够解决我的问题。这里适用于可能面临同样问题的每个人：

如github issue中所述，render函数的第二个参数有一个包含所有侦听器的数据对象。所以最简单的方法就是直接将它交给子组件：

render(h, context) {
  return h(FormFieldComponent, context.data, children)
}

在我的具体情况中，我只是直接接受侦听器，因为我操纵了数据对象的大部分：

render(h, context) {
  const data = createDataObject()
  data.on = context.data.on

  return h(FormFieldComponent, data, children)
}

Answer 2

这是发出事件的功能组件的外观：

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

并聆听父组件：

<functional-component @event_from_child="event_from_child"></functional-component>

查看实际情况here

如何在功能Vuejs组件中发出事件

2 个答案: