组件注册
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 ;
},
};