這份寶典匯集了所有你在寫 Vue3 項目可能會用到的常用 JSX 語法。

1 文本插值

Vue里面文本插值默認(rèn)是用雙大括號:

在JSX中變成了單大括號：

和Vue模板語法中的文本插值一樣，大括號內(nèi)支持任何有效的?JavaScript 表達(dá)式，比如：2 + 2，user.firstName，formatName(user)等。

2 條件渲染

jsx本身也是一個條件表達(dá)式，不再需要使用v-if指令。

2.1 使用 if/else

以上代碼等效于：

2.2 使用三目運算符

以上代碼等效于：

3 列表渲染

列表渲染直接使用JS數(shù)組的map方法即可，不需要使用v-for指令。

4 標(biāo)簽屬性綁定

屬性綁定也是使用大括號包裹，不需要使用v-bind指令。

5 class 類名綁定

直接使用JS模板字符串即可。

也可以使用數(shù)組：

6 style 樣式綁定

樣式綁定需要使用雙大括號。

7 事件綁定

綁定事件也是用大括號，注意事件名前面要加上on前綴，比如click事件要寫成onClick，mouseenter事件要寫成onMouseenter。

如果要帶參數(shù)，需要使用箭頭函數(shù)進(jìn)行包裹：

7.1 事件修飾符

jsx中給事件增加修飾符需要借助withModifiers方法。

注意：Vue模板中ref變量是可以直接解構(gòu)的，但是在jsx中不行，需要記得添加.value，比如上面的{ count.value }。

8 v-model 雙向綁定

1. 綁定modelValue

這種情況比較簡單。

JSX寫法：

SFC寫法：

1. 綁定自定義名稱

比如綁定visible，JSX中不能直接用v-model:visible的語法，需要傳入一個數(shù)組[menuShow.value, 'visible']，數(shù)組的第二個參數(shù)就是要綁定的自定義名稱。

JSX寫法：

SFC寫法：

9 slot 插槽

jsx中沒有<slot>標(biāo)簽，定義插槽需要使用雙大括號。

如果是具名插槽，則將default改成具名插槽的名稱，比如mySlot，則使用ctx.slots.mySlot?.()。

插槽從setup的第二個參數(shù)ctx中獲取，不需要加$前綴。

9.1 Scoped Slots 作用域插槽

使用作用域插槽可以實現(xiàn)插槽傳參，以下是具體的示例。

JSX和SFC中插槽使用的寫法對比。

JSX寫法：

還可以通過v-slots的方式使用：

SFC寫法：

其中的item是插槽的參數(shù)，通過

的方式給插槽傳入?yún)?shù)。

或者使用renderSlot方法，第三個參數(shù)就是要傳給插槽的參數(shù)：