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语法文章来源：https://www.toymoban.com/news/detail-707989.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文章来源地址https://www.toymoban.com/news/detail-707989.html
render(h){
return (
<el-form
ref="elForm"
class="rule-form"
props={{ model:this.form}} >
</el-form>
)
}
到了这里，关于在Vue2和Vue3中JSX的使用集锦的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
