拥抱jsx，开启vue3用法的另一种选择🔥🔥

📝背景

公司高级表单组件ProForm高阶组件都建立在jsx的运用配置上，项目在实践落地过程中积累了丰富的经验，也充分感受到了jsx语法的灵活便捷和可维护性强大，享受到了用其开发的乐趣，独乐乐不如众乐乐，为了帮助大家更好的运用jsx，开发提效，特此总结分享。

💎效果对比

以前

以往我们开发一个列表的增加、编辑、查看详情三个操作要准备3个form表单文件，表单中ui元素共性部分我们要复制三次，例如：

// addForm.vue
<template>
<el-form :model="form" >
 <el-form-item label="活动名称">
 <el-input v-model="form.name" />
 </el-form-item>
 <el-form-item label="活动区域">
 <el-input v-model="form.region" />
 </el-form-item>
 <el-form-item label="活动形式">
 <el-input v-model="form.type" />
 </el-form-item>
 </el-form>
  <el-form-item>
      <el-button >新增</el-button>
    </el-form-item>
</template>


<script setup>
import { reactive } from 'vue'
const form = reactive({
  name: '',
  region: '',
  type: '',
})
...
</script>

// editForm.vue

<template>
<el-form :model="form" >
 <el-form-item label="活动名称">
 <el-input v-model="form.name" />
 </el-form-item>
 <el-form-item label="活动区域">
 <el-input v-model="form.region" />
 </el-form-item>
 <el-form-item label="活动形式">
 <el-input v-model="form.type" />
 </el-form-item>
  <el-form-item>
      <el-button >编辑</el-button>
    </el-form-item>
  </el-form>
</template>


<script setup>
import { reactive,inject } from 'vue'
const form = reactive({})
form=inject('detailData')
...
</script>

// detailForm.vue

<template>
<el-form :model="form" :disabled="true" >
 <el-form-item label="活动名称">
 <el-input v-model="form.name" />
 </el-form-item>
 <el-form-item label="活动区域">
 <el-input v-model="form.region" />
 </el-form-item>
 <el-form-item label="活动形式">
 <el-input v-model="form.type" />
 </el-form-item>
  <el-form-item>
      <el-button >关闭详情</el-button>
    </el-form-item>
  </el-form>
</template>


<script setup>
import { reactive,inject  } from 'vue'
const form = reactive({})
form=inject('detailData')
...
</script>

如果遇到改字段名的情况，如把活动名称的name改成activityName，对应的3个文件都得去修改，表单改动多的话还有可能存在有得文件改漏的情况。

现在

现在使用ProForm结合jsx配置，如下

// add.vue
<template>
 <activity-form
 ref="formRef"
 mode="Add"
 />
      <el-button >新增</el-button>
</template>


<script setup>
Import  ActivityForm from './form.vue'
...
</script>


// edit.vue
<template>
<activity-form
 ref="formRef"
 mode="Edit"
 />
   <el-button >编辑</el-button>
</template>


<script setup>
Import  ActivityForm from './form.vue'
...
</script>
// detail.vue
<template>
 <activity-form
 ref="formRef"
 mode="detail"
 />
   <el-button >关闭详情</el-button>
</template>


<script setup>
Import  ActivityForm from './form.vue'
...
</script>

Form.vue

<template>
  <yun-pro-form
    ref="formRef"
    :form="form"
    :columns="columns"
    :form-props="{ labelPosition: 'top',disabled:mode==='detail' }"
  />
</template>

<script lang="jsx" setup>
import { reactive, ref, computed } from 'vue'
...
const formRef = ref()
const form = reactive({
  name: '',
  region: '',
  type: '',
})
const props = defineProps({
  mode: {
    type: String,
    default: 'Add',
  },
});
const columns = [
  {
    prop: 'name',
    label: '活动名称',
    type: 'input',
  },
  {
      prop: 'region',
      label: '活动区域',
      // jsx部分
      render: (form) => (
        <el-input clearable  v-model={form.region} />
      ),
   },
    {
      prop: 'type',
      label: '活动形式',
      // jsx部分
      render: (form) => (
        <el-input clearable  v-model={form.type} />
      ),
   },
]

...
</script>

改成上面的形式后，一处改动，3处对应生效，开发的重点也转移到form表单中对columns的配置上，columns配置则建立在对jsx的运用，当然举的这个例子只是一个简单案例，复杂的例子在项目中，下面我们正式开启jsx之旅吧

📝JSX是什么

JSX（JavaScript 和 XML），是一个 HTML-in-JavaScript 的语法扩展，首先在 React 中被进入，它允许我们在JavaScript中编写类似HTML的代码，并将其转换为JavaScript对象。Vue3中引入了对JSX的支持，使得我们可以更加灵活地编写组件模板，不再局限于Vue2.x中的模板语法。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

形如：

const element = <div id="root">Hello World</div>

或

function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}

📝JSX 和 template 的区别

--语法上有很大区别:

•JSX 本质就是 js 代码，可以使用 js 的任何能力