进阶用法

组件注册

Vant 支持多种组件注册方式,请根据实际业务需要进行选择。

全局注册

全局注册后,你可以在 app 下的任意子组件中使用注册的 Vant 组件。

import { Button } from 'vant';

import { createApp } from 'vue';

const app = createApp();

// 方式一. 通过 app.use 注册

// 注册完成后,在模板中通过 标签来使用按钮组件

app.use(Button);

// 方式二. 通过 app.component 注册

// 注册完成后,在模板中通过 标签来使用按钮组件

app.component(Button.name, Button);

全量注册

你也可以在全局一次性注册所有 Vant 组件:

import Vant from 'vant';

import { createApp } from 'vue';

const app = createApp();

app.use(Vant);

// Lazyload 指令需要单独进行注册

app.use(vant.Lazyload);

注意:注册所有组件会引入所有组件的代码,导致包体积增大。

局部注册

局部注册后,你可以在当前组件中使用注册的 Vant 组件。

import { Button } from 'vant';

export default {

components: {

[Button.name]: Button,

},

};

对于组件注册更详细的介绍,请参考 Vue 官方文档 - 组件注册。

JSX/TSX

在 JSX 和 TSX 中可以直接使用 Vant 组件,不需要进行组件注册。

import { Button } from 'vant';

export default {

render() {

return

Top