// 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 在模板中會自動進行解包，所以不需要使用.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，需要使用三元運算符
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，之后進行駝峰）

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

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

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

這里順便說一下 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 中，應該使用 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>

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

您可能感興趣的文章: