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

我是这个社区和VueJs的新手，所以请发发慈悲：）如果这个问题的答案是显而易见的，并且感谢你的努力，我真的很感激

我有这个部分：

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

导出默认值{
名称：“InputElement”，
功能性：对，
渲染（createElement，上下文）{
const{validation，name，field}=context.props | |{
常量{listeners}=context
//调试器
返回(
)
}
}

正如您所看到的，这不是标准的VueJs语法，我试图返回输入元素，而onInput我试图发出“event_is_nice”事件

当我尝试这个时，我得到：

“listeners.event\u is\u nice”

不是一个函数（我猜它没有注册）

当我使用createElement（标准JSX Vue语法）或 然后它就可以工作了，但我就是没办法想出这个方法。'/

解决方案是：

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

导出默认值{
名称：“InputElement”，
功能性：对，
渲染（createElement，上下文）{
const{validation，name，field}=context.props | |{
常量{listeners}=context
让emitEvent=listeners['event\u is\u nice']//添加
//调试器
返回(
emitEvent（“sadf”）}//已修改
class=“电子表格输入”/>
)
}
}

因此，我在您的代码中添加了：

let emitEvent=listeners['event\u is\u nice']

---

在输入处理程序上，

onInput={（）=>emitEvent（“sadf”）}

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

此功能组件包装在父“工厂”组件中， 看起来是这样的：

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

从“./elements/BaseLabel”导入BaseLabel
从“./elements/BaseInput”导入BaseInput
从“./elements/BaseMessage”导入BaseMessage
导出默认值{
功能性：对，
组成部分：{
基本输入，
基本标签，
基本信息
},
道具：{
字段：{
类型：对象，
默认值：（）=>{}
},
验证：{
类型：字符串
},
姓名：{
类型：字符串
},
错误消息：{
类型：字符串
}
},
渲染（createElement，{props，listeners}）{
函数propertificationElementComponent（）{
开关（道具字段类型）{
案例“复选框”：
return BaseInput//TODO:替换为Base复选框
违约：
返回基本输入
}
}
const label=createElement（BaseLabel，{props}）
const input=createElement（propertElementComponent（），{props}）
const message=createElement（BaseMessage，{props}）
//调试器
返回[标签、输入、消息]
}
}

---

因此父包装器组件不是真正接收事件并将其传递给父组件的组件

@roliroli谢谢你，伙计，我已经看到了这个帖子，但是我的问题是关于与你发布的帖子的答案不同的语法。在您的示例中，返回create element（）方法，但我想返回实际的元素，并将emitter连接到该元素。就像我在上面发布的示例一样，谢谢，伙计，我真的很欣赏这个，说实话，我已经尝试过了，但没有成功，因为（我忘了提到，可能应该提到），这个组件的父组件实际上是一个函数包装器组件，用于根据配置分解适当的字段类型。我将在下面发布整个问题。