vue3?中使用?jsx?開發(fā)的詳細(xì)過程

更新時間：2022年09月05日 15:47:14 作者：雪急飛緒

這篇文章主要介紹了vue3?中使用?jsx?開發(fā),本文著重說一下在使用 .vue 文件和 .jsx 文件在使用語法上的差異，需要的朋友可以參考下

安裝 JSX 插件

在 Vue2 中要想使用 jsx 開發(fā)，需要安裝 @vue/babel-preset-jsx 等插件，之后在 babel 里指定即可，詳細(xì)可以參考下面的 Vue2 GitHub 文檔

Vue2：GitHub 文檔 —— Babel Preset JSX

最近在使用 Vue3，突然想用 jsx 進(jìn)行開發(fā)部分頁面，順便記錄一下，也可以參考下面的 Vue3 GitHub 文檔

Vue3：GitHub 文檔 —— Babel Plugin JSX for Vue 3.0

構(gòu)建工具使用的是 vite，要想使用 jsx 開發(fā)，需要安裝 @vitejs/plugin-vue-jsx，之后配置 vite.config.js 里的 plugins 即可

// vite.config.js
import vueJsx from '@vitejs/plugin-vue-jsx'
import { defineConfig } from 'vite'

export default defineConfig(() => {
  return {
    plugins: [vueJsx()]
  }
})

接下來著重說一下在使用 .vue 文件和 .jsx 文件在使用語法上的差異

使用語法差異

模板

之前在 template 里寫的 html 代碼需要放到 render 函數(shù)或 setup 函數(shù)里，Vue3 在 setup 里寫會好一點

<!-- .vue -->
<template>
  <div>Hello World</div>
</template>

<!-- .jsx -->
<script>
export default defineComponent({
  setup() {
    return () => (
      <div>Hello World</div>
    )
  }
})
</script>

指令

需要把雙引號改為單括號

v-if、v-show、v-html等同理
v-bind也是一樣的，不過需要把動態(tài)綁定需要去掉:

注意：

在.vue文件中，ref 在模板中會自動進(jìn)行解包，所以不需要使用.value
但是在.jsx文件中，ref 在模板中不會自動解包，所以需要使用.value

<!-- .vue -->
<el-input v-model="queryParams.pageNumber" />
<el-form model="queryParams" :inline="true">...</el-form>

<!-- .jsx -->
<el-input v-model={queryParams.value.pageNumber} />
<el-form model={queryParams.value} inline={true}>...</el-form>

事件修飾符

想使用事件修飾符可以把 v-model 改為一個數(shù)組，事件修飾符需要以數(shù)組的形式傳遞
如果需要傳遞參數(shù)，需要在數(shù)組第二個參數(shù)中以字符串形式傳遞
推薦：可以使用 _ 來分割事件修飾符，GitHub 里沒有特殊聲明，但是 Babel Plugin JSX for Vue 3.0 源碼里做了判斷，可以參考： parseDirectives.ts#L52-L61

<!-- .vue -->
<el-input v-model.trim={ queryParams.name } />

<!-- .jsx -->
<el-input v-model={ [queryParams.value.name, ['trim'] } />
<!-- 或 -->
<el-input v-model_trim={ refVal.value } />

自定義指令

如下示例為：添加 .event 事件修飾符并傳遞 arg 參數(shù)，直接打印 binding 效果如下：

<!-- .vue -->
<el-button
  v-hasPermission:arg.event="['xxx:add']"
  type="primary"
  plain
  icon="Plus"
  @click="handleAdd"
>
  新增
</el-button>

<!-- .jsx -->
<el-button
  v-hasPermission={[['xxx:add'], 'arg', ['event']]}
  type='primary'
  plain
  icon="Plus"
  onClick={handleAdd}
>
  新增
</el-button>

v-for

v-for 無法直接使用，需要使用 map 去實現(xiàn)循環(huán)遍歷渲染

<!-- .vue -->
<h1 v-for="item in list" :key="item">{{item}}</h1>

<!-- .jsx -->
<script>
{list.value.map(item => (
  <h1>{item}</h1>
))}
</script>

注意：

如果遍歷時需要判斷每一項其是否顯示，不能使用v-if，需要使用三元運(yùn)算符
v-for與v-if不能一起使用

<!-- .vue -->
<template v-for="col in columns">
  <el-table-column
    v-if="col.visible"
    :key="col.key"
    :label="col.label"
    :prop="col.field"
  />
</template>

<!-- .jsx -->
{columns.value.map(col =>
  col.visible ? (
    <el-table-column
      key={col.id}
      label={col.label}
      prop={col.field}
    />
  ) : null
)}

v-on

v-on 無法直接使用，需要使用原生綁定事件的方式去實現(xiàn)（@ -> on，之后進(jìn)行駝峰）

<!-- .vue -->
<el-button @click="handleQuery">搜索</el-button>

<!-- .jsx -->
<el-button onClick={handleQuery}>搜索</el-button>

系統(tǒng)按鍵修飾符不能通過 .xxx 形式書寫，需要自己進(jìn)行判斷，比如如下示例是按回車時進(jìn)行搜索

這里順便說一下 style，由于里面是 : 形式表示，需要改為對象形式書寫

<!-- .vue -->
<el-input
  v-model.trim="queryParams.number"
  clearable
  style="width: 180px"
  @keyup.enter="handleQuery"
/>

<!-- .jsx -->
<el-input
  v-model_trim={queryParams.value.number}
  clearable
  style={{ width: '180px' }}
  onKeyup={e => e.code === 'Enter' && handleQuery()}
/>

插槽

在 jsx 中，應(yīng)該使用 v-slots 代替 v-slot，且插槽需要是函數(shù)式組件

<!-- .vue -->
<el-dialog
  v-model="configOpen"
  title="彈出框"
  append-to-body
  >
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="configOpen = false">取 消</el-button>
    </div>
  </template>
</el-dialog>

<!-- .jsx -->
<el-dialog
  v-model={configOpen.value}
  title='彈出框'
  append-to-body
  v-slots={{
    footer: () => (
      <div class='dialog-footer'>
        <el-button
          onClick={() => {
            configOpen.value = false
          }}
        >
          取 消
        </el-button>
      </div>
    )
  }}
  >
  <!-- ... -->
</el-dialog>

到此這篇關(guān)于vue3中使用jsx開發(fā)的文章就介紹到這了,更多相關(guān)vue3使用jsx內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: