在Vue2和Vue3中JSX的使用集锦

Vue2安装JSX支持

有时候，我们使用渲染函数（render function）来抽象组件，而渲染函数使用Vue的h函数来编写Dom元素相对template语法差别较大，体验不佳，这个时候就派 JSX 上场了。然而在Vue3中默认是带了JSX支持的，而在 Vue2 中使用 JSX，需要安装并使用 Babel 插件：

• @vue/babel-preset-jsx
• @vue/babel-helper-vue-jsx-merge-props

安装脚本

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props 

配置.babelrc文件

module.exports = {   presets: [     '@vue/cli-plugin-babel/preset',     ['@vue/babel-preset-jsx',       {         'injectH': false       }]   ] } 

template和JSX的使用差异

针对方向

变量绑定

变量绑定由data中的数据由 v-model="value"变为 v-model={this.value}

template语法

<el-input v-model="value" /> 

JSX语法

<el-input v-model={this.value} /> 

事件绑定

变量绑定由data中的数据由 @input="inputChange"或v-on:input="inputChange"变为 onInput={this.inputChange}或on-input={this.inputChange}

template语法

<el-input v-model="value" @input="inputChange" v-on:click="inputClick" /> 

JSX语法

<el-input v-model={this.value} onInput={this.inputChange} on-click={this.inputClick} /> 

条件渲染

条件渲染由 v-if变为插入JSX 语句段

template语法

<el-input v-model="value" v-if="show" @input="inputChange" v-on:click="inputClick" /> 

JSX语法

{ 	if(this.show){ 		return <el-input v-model={this.value} onInput={this.inputChange} on-click={this.inputClick} /> 	} }  

列表渲染

变量绑定由data中的数据由 v-for变为插入JSX 语句段

template语法

<el-select v-model={this.form.formula} clearable>     <el-option     	v-for="item in options"        :key="item.value"        :label="item.label"        :value="item.label">       </el-option> </el-select> 

JSX语法

<el-select v-model={this.form.formula} clearable>     {         this.options.map(item =>{             return (                 <el-option                  key={item.value}                  label={item.label}                  value={item.value}>                 </el-option>             )         }          } </el-select> 

插槽的使用

命名插槽

组件名称：BaseLayout
template语法

<div class="container">   <header>  	<!-- 具名插槽  -->     <slot name="header"></slot>   </header>   <main>   	<!-- 匿名插槽  -->     <slot></slot>     <!-- 作用域插槽  -->     <slot :main="mainData"></slot>   </main>      <footer>   	<!-- 具名插槽  -->     <slot name="footer"></slot>   </footer> </div> 

JSX语法
注意：$slots在Vue2.6版本起才支持，在之前使用的是$slotScopeds

<div class="container">   <header>     {     	//具名插槽     	this.$slots.header     }   </header>   <main>     {     	//匿名插槽     	this.$slots.default     }     {     	//作用域插槽        () => this.$slots.main(this.mainData)     }   </main>   <footer>     {     	//具名插槽     	this.$slots.footer     }   </footer> </div> 

使用插槽

template语法

<base-layout>   <template #header>   	<div>我是头部</div>   </template>   <template #default>   	<div>匿名插槽</div>   </template>   <!-- vue2.6之后使用方式 -->   <template #main="mainData">   	<div>作用域插槽：{{mainData}}</div>   </template>   <!-- vue2.6之前使用 -->   <template slot="main" slot-scope="mainData">   	<div>作用域插槽：{{mainData}}</div>   </template>   <template #footer>   	<div>具名插槽</div>   </template> </base-layout> 

JSX语法

<!-- vue2.6之后使用方式 --> <base-layout> 	{{       default: () => <div>匿名插槽</div>,       header: () => <div>我是头部</div>,       main: (mainData) => <div>作用域插槽：{mainData}</div>,       footer: () => <div>具名插槽</div>     }} </base-layout> <!-- vue2.6之前使用方式 --> <base-layout 	slotScoped={{       default: () => <div>匿名插槽</div>,       header: () => <div>我是头部</div>,       main: (mainData) => <div>作用域插槽：{mainData}</div>,       footer: () => <div>具名插槽</div>     }}>	 </base-layout> 

JSX中el-form

el-form需要绑定通过props={{ model:this.form}}来绑定form对象，不能使用model={this.form} ，否则就会出现报错Invalid handler for event “input“: got undefined

render(h){     return ( 	    <el-form 	        ref="elForm" 	        class="rule-form" 	        props={{ model:this.form}} > 	    </el-form>     ) }