Question

我是社区和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>

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

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

当我使用createElement（标准JSX Vue语法）或使用然后就可以了，但是我没办法弄清楚这个方法。.'/

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

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

因此父包装器组件实际上并没有真正接收事件并将其传递给父组件...

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

2 个答案: