作者

novlan1

Vant2 组件库升级 Vant4

1. 开始

一些项目需要从 vant@2 升级到 vant@4，记录下差异。

2. picker

回调参数更新：

onConfirm(v) {
-  console.log(v.key);
+  console.log(v.selectedOptions[0].key);
}

columns 默认数据结构：

Array<{
  text: string;
  value: any;
}>

如需更改，需传入 columns-field-names，如

:columns-field-names="{ text: 'text', value: 'key', children: 'children' }"

3. popup

是否展示由 v-model 改为 v-model:show

<van popup
-  v-model="show"
+  v-model:show="show"
>
</van-popup>

4. toast

4.1 引入方式

函数式调用的需要手动引入样式，无法通过 auto-import 自动引入。

import 'vant/lib/toast/index.css';

4.2 使用方式

-  import { Toast } from 'vant';
+  import { showFailToast, showSuccessToast, showToast } from 'vant';

-  Toast.success('操作成功');
-  Toast('操作中');
-  Toast.Fail('操作失败')
+  showFailToast('操作失败')
+  showToast('操作中')
+  showSuccessToast('操作成功')

5. dialog

是否展示由 v-model 改为 v-model:show

<van-dialog
-  v-model="show"
+  v-model:show="show"
>
</van-dialog>

6. action-sheet

是否展示由 v-model 改为 v-model:show

<van-action-sheet
-  v-model="show"
+  v-model:show="show"
>
</van-action-sheet>

7. tabs

<van-tabs
-  v-model="curTab"
+  v-model:active="curTab"
>
</van-tabs>

8. field

<van-field
-  :value="organizationInfo[v.prop]"
+  :model-value="organizationInfo[v.prop]"
-  @input="inputHandle"
+  @update:model-value="updateHandle"
>
</van-field>

9. List

<van-list
-  v-model="loading"
+  v-model:loading="loading"
-  :error.sync="error"
+  v-model:error="error"
>
</van-list>

10. Popover

<van-popover
-  v-model="show"
+  v-model:show="show"
>
</van-popover>

11. number-keyboard

<van-number-keyboard
-  :value="value"
+  :model-value="value"
>
</van-number-keyboard>

12. pull-refresh

<van-pull-refresh
-  :value="value"
+  :model-value="value"
>
</van-pull-refresh>

13. 其他

13.1. .native 修饰符被废弃

Vue 3 中，.native 修饰符已被废弃，以下是关键区别和迁移建议：

• ​​Vue 2​​：.native 用于监听组件根元素的原生事件（如 @click.native），因为自定义组件的 v-on 默认只能监听子组件通过 $emit 触发的事件。
• ​Vue 3​​：移除了 .native，改为通过 emits 选项显式声明组件事件。未在 emits 中定义的事件会被视为原生事件，自动绑定到根元素。