使用范围（结合第三方ui组件）
不仅仅在 render 函数里面使用 JSX，而且还可以在 methods 里面返回 JSX，然后在 render 函数里面调用这个方法。并且也可以直接使用例如elementui等ui组件。
JSX 还可以直接赋值给变量、例如使用elementui的el-dialog。（您在测试该案例时记得安装elemnt）
methods: { $_renderFooter() { return ( <div> <el-button>确定</el-button> <el-button onClick={ () =>this.closeDialog() }>取消</el-button> </div> ); }, openDialog(){ this.visible = true }, closeDialog(){ this.visible = false } }, render() { const buttons = this.$_renderFooter(); return ( <div> <Button onClick={ () =>this.openDialog() }>打开Dialog</Button> <el-dialog visible={this.visible}> <div>弹窗内容</div> <template slot="footer">{buttons}</template> </el-dialog> </div> ); }
插槽
插槽就是子组件中提供给父组件使用的一个占位符，插槽分为默认插槽，具名插槽和作用域插槽，下面我依次为您带来每种在JSX中的用法与如何去定义插槽。
默认插槽
使用默认插槽
使用element-ui的Dialog时，弹框内容就使用了默认插槽，在JSX中使用默认插槽的用法与普通插槽的用法基本是一致的，如下代码所示：
render() { return ( <ElDialog title="弹框标题" visible={true}> {/*这里就是默认插槽*/} <div>这里是弹框内容</div> </ElDialog> ) }
自定义默认插槽
在Vue的实例this上面有一个属性s l o t s , 这 个 上 面 就 挂 载 了 一 个 这 个 组 件 内 部 的 所 有 插 槽 ， 使 用 t h i s . slots,这个上面就挂载了一个这个组件内部的所有插槽，使用this.slots,这个上面就挂载了一个这个组件内部的所有插槽，使用this.slots.default就可以将默认插槽加入到组件内部。
export default { props: { visible: { type: Boolean, default: false } }, render() { return ( <div class="custom-dialog" vShow={this.visible}> {/**通过this.$slots.default定义默认插槽*/} {this.$slots.default} </div> ) } }
使用：
<myComponent visible={true} slot>我是自定义默认插槽</myComponent>
另vShow相当于 v-show，不代表别的也可以这样！
具名插槽
使用具名插槽
有时候我们一个组件需要多个插槽，这时候就需要为每一个插槽起一个名字，比如element-ui的弹框可以定义底部按钮区的内容，就是用了名字为footer的插槽。
render() { return ( <ElDialog title="弹框标题" visible={true}> <div>这里是弹框内容</div> {/** 具名插槽 */} <template slot="footer"> <ElButton>确定</ElButton> <ElButton>取消</ElButton> </template> </ElDialog> ) }
自定义具名插槽
在上节自定义默认插槽时提到了s l o t s ， 对 于 默 认 插 槽 使 用 t h i s . slots，对于默认插槽使用this.slots，对于默认插槽使用this.slots.default，而对于具名插槽，可以使用this.$slots.footer进行自定义。
render() { return ( <div class="custom-dialog" vShow={this.visible}> {this.$slots.default} {/**自定义具名插槽*/} <div class="custom-dialog__foolter">{this.$slots.footer}</div> </div> ) }
使用：
<myComponent visible={true}> <template slot="footer"> <ElButton>确定</ElButton> <ElButton>取消</ElButton> </template> </myComponent>
作用域插槽
使用作用域插槽
有时让插槽内容能够访问子组件中才有的数据是很有用的，这时候就需要用到作用域插槽,在JSX中，因为没有v-slot指令，所以作用域插槽的使用方式就与模板代码里面的方式有所不同了。比如在element-ui中，我们使用el-table的时候可以自定义表格单元格的内容，这时候就需要用到作用域插槽。
<myComponent1 visible={this.visible} {...{ scopedSlots: { test: ({ user }) => { // 这个user就是子组件传递来的数据，同理可这样拿到el-table的row，不过test得是default，不过案例还是我这样 <div style="color:blue;">快来啊，{user.name}，看看这个作用域插槽</div> }, }, }} ></myComponent1>
自定义作用域插槽
子组件中通过 {this.$scopedSlots.test({ user: {name:‘纸飞机’}})} 指定插槽的名称是 test，并将 user 传递给父组件。父组件在书写子组件标签的时候，通过 scopedSlots 值指定插入的位置是 test，并在回调函数获取到子组件传入的 user 值
注意：作用域插槽是写在子组件标签中的，类似属性。而不是像具名插槽放在标签内部
新建个作用域插槽.js
// 一个为jsx的子组件(玩玩插槽) export default { name: "myComponent", data() { return { }; }, props: { visible: { type: Boolean, default: false, }, listData: { type: Array, default: function() { return []; }, }, }, render() { return ( <div vShow={this.visible}> {/**自定义作用域插槽*/} <div class="item"> {this.$scopedSlots.test({ user: {name:'纸飞机'} })} </div> </div> ); }, };
效果：
函数式组件
函数式组件是一个无状态、无实例的组件，详见官网说明，新建一个 FunctionalComponent.js 文件，内容如下：
// export default ({ props }) => <p>hello {props.message}</p>; // 或者推荐下方写法 export default { functional: true, name: "item", render(h, context) { console.log(context.props) return <div style="color:red;font-size:18px;font-weight:bold">{context.props.message}</div>; }, };
HelloWorld.js中使用：
<funComponent message="展示下函数式组件"></funComponent>
效果：
代码地址
https://codechina.csdn.net/qq_32442973/vue2-jsx-demo.git
后记
无论你是要用vue2的jsx还是vue3的jsx都没有本质区别，毕竟vue3是向下兼容vue2的；倘若你真的要学vue3的JSX，我建议你学完vue2的再去学；另我不推荐在vue中所有的组件和页面都用JSX，两者需要权衡利弊；同时也不必担心JSX和template的相互嵌套，两者是可以互相嵌套的。
