如何从 Vuejs 中的 JSX 功能组件发出事件答案

【问题标题】：How to emit event from JSX functional component in Vuejs如何从 Vuejs 中的 JSX 功能组件发出事件
【发布时间】：2019-07-15 07:44:17
【问题描述】：

我是社区和 VueJ 的新手，所以请多多包涵 :) 如果问题的答案是显而易见的，并且感谢您预先付出的努力，我真的很感激！

我有这个组件：

<script>
    export default {
      name: 'InputElement',
      functional: true,
      render(createElement, context) {
        const { validation, name, field } = context.props || {}
        const { listeners } = context
        // debugger
        return (
          <input id={name}
            v-validate={validation}
            type={field.type}
            placeholder={field.placeholder}
            name={name}
            onInput={ listeners.event_is_nice('sadf')}
            class="e-form__input"/>
        )
      }
    }
</script>

如您所见，它不是标准的 VueJs 语法，我正在尝试返回输入元素，而 onInput 我正在尝试发出“event_is_nice”事件。

当我尝试这个时，我得到： "listeners.event_is_nice" 不是函数（我猜它没有注册）。

当我使用 createElement（标准 JSX Vue 语法）或我使用然后它就可以了，但是我只是没有运气弄清楚这种方法..'/

【问题讨论】：

stackoverflow.com/a/53505581/6385184
@roliroli 谢谢老兄，我已经看过这个帖子，但我的问题是关于语法与您发布的帖子的答案不同。在您的示例中，您返回 create element() 方法，但我想返回附加了发射器的实际元素。就像我在上面发布的示例一样

标签： javascript vue.js vuejs2 jsx

【解决方案1】：

解决方案是：

export default {
  name: 'InputElement',
  functional: true,
  render(createElement, context) {
    const { validation, name, field } = context.props || {}
    const { listeners } = context
    let emitEvent = listeners['event_is_nice'] //ADDED
    // debugger
    return (
      <input id={name}
        v-validate={validation}
        type={field.type}
        placeholder={field.placeholder}
        name={name}
        onInput={ () => emitEvent("sadf")} // MODIFIED
        class="e-form__input"/>
    )
  }
}

所以我在你的代码中添加了：let emitEvent = listeners['event_is_nice']

在输入处理程序onInput={ () => emitEvent("sadf")}

【讨论】：

谢谢，我真的很感激，老实说我已经尝试过了，但它没有用，因为（我忘了提及并且可能应该有），这个组件的父级实际上是一个功能性包装组件，用于根据配置分解正确的字段类型。我将在下面发布整个问题。

【解决方案2】：

所以来自 roli roli 的答案是有效的，我在发送箱中尝试过，这让我意识到我没有很好地解决这个问题。

这个功能组件被包裹在父“工厂”组件中，看起来像这样：

<script>
import BaseLabel from './elements/BaseLabel'
import BaseInput from './elements/BaseInput'
import BaseMessage from './elements/BaseMessage'

export default {
  functional: true,
  components: {
    BaseInput,
    BaseLabel,
    BaseMessage
  },
  props: {
    field: {
      type: Object,
      default: () => {}
    },
    validation: {
      type: String
    },
    name: {
      type: String
    },
    errorMsg: {
      type: String
    }
  },

  render(createElement, { props, listeners }) {
    function appropriateElementComponent() {
      switch (props.field.type) {
        case 'checkbox':
          return BaseInput // TODO: Replace with Base Checkbox
        default:
          return BaseInput
      }
    }
    const label = createElement(BaseLabel, { props })
    const input = createElement(appropriateElementComponent(), { props })
    const message = createElement(BaseMessage, { props })
    // debugger
    return [label, input, message]
  }
}
</script>

所以父包装组件是一个没有真正接收事件并将事件传递给父组件的组件......

【讨论】：