在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

安装脚本

cmd 复制代码
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置.babelrc文件

javascript 复制代码
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语法

javascript 复制代码
<el-input v-model="value" />

JSX语法

javascript 复制代码
<el-input v-model={this.value} />

事件绑定

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

template语法

javascript 复制代码
<el-input v-model="value" @input="inputChange" v-on:click="inputClick" />

JSX语法

javascript 复制代码
<el-input v-model={this.value} onInput={this.inputChange} on-click={this.inputClick} />

条件渲染

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

template语法

javascript 复制代码
<el-input v-model="value" v-if="show" @input="inputChange" v-on:click="inputClick" />

JSX语法

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

列表渲染

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

template语法

javascript 复制代码
<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语法

javascript 复制代码
<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语法

html 复制代码
<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

javascript 复制代码
<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语法

html 复制代码
<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语法

html 复制代码
<!-- 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

javascript 复制代码
render(h){
    return (
	    <el-form
	        ref="elForm"
	        class="rule-form"
	        props={{ model:this.form}} >
	    </el-form>
    )
}
相关推荐
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发
YH丶浩3 天前
vue自定义数字滚动插件
开发语言·前端·javascript·vue
个人看法3 天前
h5实现一个吸附在键盘上的工具栏
前端·javascript·vue
西洼工作室5 天前
设计模式与原则精要
前端·javascript·设计模式·vue
雪山上的小灰熊5 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
fcm197 天前
(6) tauri之前端框架性能对比
前端·javascript·rust·前端框架·vue·react
王者鳜錸7 天前
方言普通话识别大模型,支持中英+202种方言识别
java·vue·语音识别
瓯雅爱分享7 天前
基于Java后端与Vue前端的MES生产管理系统,涵盖生产调度、资源管控及数据分析,提供全流程可视化支持,包含完整可运行源码,助力企业提升生产效率与管理水平
java·mysql·vue·软件工程·源代码管理
邂逅星河浪漫8 天前
【Spring AI】Ollama大模型-智能对话实现+项目实战(Spring Boot + Vue)
java·人工智能·spring boot·vue·prompt·agent·ollama
知识分享小能手8 天前
React学习教程,从入门到精通,React Router 语法知识点及使用方法详解(28)
前端·javascript·学习·react.js·前端框架·vue·react