allow for jsx/createElement inside template prop functions

[darrenjennings]

What problem does this feature solve?

Allows for inlining render functions inside a template for quick expressive rendering. When using render functions to pass into a component, you have to define a method on the vue instance which returns jsx, but would be nice if for small functions you could define them inline and anonymous.

What does the proposed API look like?

allow for JSX inside :

<template>
  <div>
    <my-cool-component :render="() => { return <h1>I will get called inside the cool component!</h1> }"/>
  </div>
</template>

const MyCoolComponent = {
  props: {
    render: {
      type: Function
  },
  render(){
    return (
      <div>{this.$props.render()}</div>
    )
  }
}

If this is a feature that would be accepted, I would be interested in looking into contributing if you could point me in the right direction. Thanks!

[yyx990803]

Embedding JSX parsing inside template parser is a lot of work, plus the related issues regarding syntax highlighting, tooling support, etc., I don't think it justifies the use case.