Utilizando Slots con Render Functions y JSX

Recuerden , que $slots.default es muy diferente a children …

https://vuejs.org/v2/guide/render-function.html#slots-vs-children

Solucion
En el componente ModalJsx

render() {
	return (this.show) ? <div class="modal">
		<div class="content">{this.$slots.default}</div>
	</div> : null
}

En el componente App

<modal-jsx :show="show">
	<p>hello World</p>
</modal-jsx>

Mi solución para agregar el slot al ModalJSX, fue agregar un div en el render del componente ModalJsx.vue, me quedó de la siguiente manera:

return (this.show) ? <div class="modal">
      <div class="content">
        {this.$slots.default}
      </div>
      <button onClick={this.clickCancelHandle} >Cancel</button>
      <button onClick={this.clickOkHandle}>Ok</button>
    </div> : null

Y por último, pasarle el contenido del slot desde App.vue

<modal-jsx :show="show">
     <h1>Titulo modalJsx</h1>
     <hr>
     <p> Hello world from AppVue </p>
   </modal-jsx>

Utilizando Slots en JSX!

render() {
    return (this.show) ? <div id="modal">
      <div class="content">{this.$slots.default}</div>
      <button onClick={this.clickCancelHandler}>Cancelar</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

Hola! Tengo dudas sobre la necesidad real de incorporar funcionalidades de React a Vue, la verdad…creo que vue tiene por si mismo posibilidades de sobra para hacer cualquier cosa, estamos en 2019, pregunta: ¿Alguien sabe si JSX se utiliza en proyectos reales y qué perspectivas de crecimiento tiene actualmente en el ecosistema Vue? no he oido demasiado sobre esto últimamente…

• Vue.js Slots - Flabio Copes
• Understanding Component Slots with Vue.js - Alligator.io
• The Power of Scoped Slots in Vue
• Practical Use of Vue.js Scoped Slots

Mi aporte como colocar comentarios en JSX

render () {
        return (this.show) ? <div class="modal">
            {/* <p>{this.message}</p> */}
            {this.$slots.default}
            <button onClick={this.clickCancelHandler}>Cancel</button>
            <button onClick={this.clickOkHandler}>Ok</button>
        </div> : null
    },

``
<modal-jsx :show=“show” message=“Hola desde Jsx”>
<h1>Modal JSX</h1>
<p>Hola desde mi componente slot</p>
</modal-jsx>

Solución JSX:

  render() {
    return (this.show) ? <div class="modal">
      <div> {this.$slots.default} </div>
      <button onClick={this.clickCancelHandler}>Cancel</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

Como dato interesante, con {{}} no funciona, tarde algo de tiempo en comprender que el equivalente en JSX es {}.

Mi código en ModalJsx.vue

return (this.show) ? <div class="modal">
                <div class="content">{this.$slots.default}</div>
                <button onClick={this.clickCancelHandler}>Cancel</button>
                <button onClick={this.clickOkHandler}>Ok</button>
            </div> : null

Y mi código en App.vue

<modal-jsx :show="show">
            <h1>Slots JSX</h1>
            <p>Hello world! con slots y jsx</p>
        </modal-jsx>

Los slots son secciones dentro de un componente, donde podemos cargar o reemplazar con elementos desde un elemento padre.

Definiendo slot en uncomponente:

render (createElement) {
    return (this.show) ? createElement('div', {
      class: 'modal',
    }, [
		createElement('div', {
        		class: 'content',
   	 	 }, this.$slots.default)

Cargando o reemplazando desde un elemento padre :

<modal-create-element :show="show">
	<h1>Modal title</h1>
	<p>Hello World</p>
</modal-create-element>

La solucion con JSX: render() {
return (this.show) ? <div class=“modal”>
<div class=“content”>
{this.$slots.default}
</div>
<div class=“form”>
{this.$slots.form}
</div>
<div class=“btn”>
{this.$slots.btn}
</div>
</div> : null
},

Lo hice de esta manera: con el createElement render(h) {
return (this.show) ? h(‘div’, {
class: ‘modal’
}, [
h(‘div’, {
class: ‘content’
}, this.$slots.default),
h(‘div’, {
class: ‘btn’
}, this.$slots.btn)
// h(‘button’, {
// class: ‘btn’,
// on: {
// click: this.clickCancelar
// }
// }, ‘Cancelar’),
// h(‘button’ , {
// class: ‘btn’,
// on: {
// click: this.clickok
// }
// }, ‘ok’)
]) : null
},

Dejo mi código JSX para esta clase:

return (this.show) ? <div class="modal">
            <p>{this.$slots.default}</p>
            <button onClick={this.clickCancelHandler}>Cancelar</button>
            <button onClick={this.clickOkHandler}>Ok</button>
        </div> : null

En App.vue:

<modal-jsx message="Hello Jsx" :show="show">
    <p>Slot JSX</p>
</modal-jsx>

En ModalJsx.vue:

<div class="modal">
    <div class="content">{this.$slots.default}</div>
    <button onClick={this.handleCancelClick}>Cancel</button>
    <button onClick={this.handleOkClick}>Ok</button>
</div>

ModalJsx.vue

		render() {
		return (this.show) ? <div class="modal">
			<div class="content">{this.$slots.default}
				<button onClick={this.clickCancelHandler}>Cancel</button>
				<button onClick={this.clickOkHandler}>Ok</button>
			</div>
		</div> : null
	},

¿Que son los Slots?

Componente ModalJsx.vue

  render () {
    return (this.show) ? <div class="modal">
      <div class="content">
        {this.$slots.default}
      </div>
      <button onClick={this.clickCancelHandler}>Cancel</button>
      <button onClick={this.clickOkHandler}>Ok</button>
    </div> : null
  },

Componente App.vue

    <modal-jsx v-bind:show="show">
      <h1>Modal title</h1>
      <p>Hello World</p>
    </modal-jsx>

Buena explicación, sencilla y entendible

App.vue

<modal-jsx :show="showModal">
	<h1>Test Slot with JSX</h1>
</modal-jsx>

<div class="modal">
        <div class="content">{this.$slots.default}</div>
        <button onClick={this.cancelHandler}>Cancelar</button>
        <button onClick={this.okHandler}>Ok</button>
</div>

Por si quieres trabajar con las directivas @ o v-on específicamente, te recomiendo trasladar con un slot desde el JSX hasta el App.vue la información de este y definir tus métodos en el App( claro, sería útil en especial en este caso remoto, pero en un proyecto mucho más grande no lo sería tanto🤔):
JSX:

<script>
export default {
    name:"ModalJsX",

    props: {
        show: {
            type: Boolean,
            default: false
        }
    },

    render() {
      return(this.show) ?<div id="modal" v-show="show">
                <div>{ this.$slots.default }</div>
            </div> : null
    }
}
</script>

App.vue:

<template>
    <div id="app">
        <button @click.prevent="toogleModalWatcher">Toogle Modal</button>
        <modal-create-element-vue :show="show">
            <p>Sistem Rooms</p>
            <h1>Derek</h1>
        </modal-create-element-vue>
        <modal-js-x :show="show">
            <h1>This is my room</h1>
            <p>Tiene 84 elementos dentro</p>
            <button @click='ChooseYourCancel'>Cancel</button>
            <button @click='ChooseYourOk'>Ok</button>
        </modal-js-x>
    </div>
</template>

<script>
import ModalJsX from "./ModalJsX";
export default {
    name:"app",
    data() {
        return {
            show: false
        }
    },
    components: {
        ModalJsX
    },
    methods: {
        toogleModalWatcher() {
            this.show = !this.show;
        },
        ChooseYourCancel() {
            console.log(`You Choosed cancel`)
        },
        ChooseYourOk() {
            console.log(`You Choosed OK`)
        },
    }
}
</script>

<style>
    body {
        background-color: rgb(255, 243, 218);
    }
</style>

Modaljsx.vue

render() {
    return this.show ? (
      <div class="modal">
        <p>{this.$slots.default}</p>
        <button onclick={this.clickCancelHandler}>Cancel</button>
        <button onclick={this.clickOkHandler}>Ok</button>
      </div>
    ) : null;
  }

App.vue:

<modal-jsx :show="show">
      <h1>Hello from ModalCreateElement</h1>
      <p>This is a modal</p>
    </modal-jsx>

APP.vue

<ModalJSX :show="show" message="Hello JSX">
      <p>Hello JSX!</p>
    </ModalJSX>

ModalJSX.vue

<p>{this.$slots.default}</p>

render() {
  return this.show ? <div class="modal">
    <div class="content">{this.$slots.default}</div>
    <button onClick={this.clickCancelHandler}>Cancel</button>
    <button onClick={this.clickOkHandler}>Ok</button>
  </div> : null
}

`
App.vue
<modal-jsx :show=“show”>
<p>Hola Mundillito</p>
</modal-jsx>

ModalJsx.vue
return (this.show) ? <div class=“modal”>
<div class=“content”>{this.$slots.default}</div>
<button onClick={this.clickCancelHandler}>Cancel</button>
<button onClick={this.clickOkHandler}>Ok</button>
</div> : null
`