{site_name}

{site_name}

🌜 搜索

Vant4 是一个基于 Vue.js 的移动端 UI 组件库,它的 v3 版本相较于 v2 版本做了一些重要的变化和升级

前端 𝄐 0
vant版本,vant36.5,vant-cli,vant dialog,vant下载,vant android
Vant4 是一个基于 Vue.js 的移动端 UI 组件库,它的 v3 版本相较于 v2 版本做了一些重要的变化和升级。

其中最显著的变化是采用了新的组件注册方式。在 Vant4 v2 中,组件的注册是通过 Vue.use() 方法全局安装插件,然后在组件中使用 Vue.component() 方法来注册组件。而在 Vant4 v3 中,采用了自动化注册组件的方式,无需手动注册组件,只需要在项目的入口文件中导入对应的组件库即可自动注册所有组件,例如:

javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import Vant from 'vant';

const app = createApp(App);
app.use(Vant);
app.mount('#app');


此外,Vant4 v3 还加入了 TypeScript 支持,并且对某些组件进行了改进和优化,如 Tabbar、Swipe Cell 等。

举个例子,下面是一个使用 Vant4 v3 中 Tabbar 组件的示例:

html
<template>
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
<van-tabbar-item icon="search">搜索</van-tabbar-item>
<van-tabbar-item icon="friends-o">朋友</van-tabbar-item>
<van-tabbar-item icon="setting-o">设置</van-tabbar-item>
</van-tabbar>
</template>

<script>
import { ref } from 'vue';

export default {
setup() {
const active = ref(0);
return { active };
},
};
</script>


在这个例子中,使用了 Vant4 v3 中的自动化组件注册方式,直接导入了整个 Vant 组件库,并在组件中使用了 Tabbar 和 TabbarItem 组件。同时,为了使组件更加稳定、类型安全,还使用了 Vue.js 3.x 新增的 Composition API 中的 ref() 方法实现了对 active 属性的响应式处理。