mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-27 03:46:35 +08:00
docs: add component registration guide (#8377)
This commit is contained in:
parent
cc69e5d715
commit
5853895e65
@ -1,5 +1,42 @@
|
|||||||
# Advanced Usage
|
# Advanced Usage
|
||||||
|
|
||||||
|
### Intro
|
||||||
|
|
||||||
|
Through this chapter, you can learn about some advanced usages of Vant.
|
||||||
|
|
||||||
|
## Component Usage
|
||||||
|
|
||||||
|
### Component Registration
|
||||||
|
|
||||||
|
Vant supports multiple ways to register components:
|
||||||
|
|
||||||
|
#### Global Registration
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Button } from 'vant';
|
||||||
|
|
||||||
|
// Method 1. via Vue.use
|
||||||
|
Vue.use(Button);
|
||||||
|
|
||||||
|
// Method 2. Register via Vue.component
|
||||||
|
Vue.component(Button.name, Button);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Local Registration
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Button } from 'vant';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
[Button.name]: Button,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
> For more information, please refer to [Vue.js - Component Registration](https://vuejs.org/v2/guide/components-registration.html)。
|
||||||
|
|
||||||
## Browser adaptation
|
## Browser adaptation
|
||||||
|
|
||||||
### Viewport Units
|
### Viewport Units
|
||||||
|
@ -6,6 +6,43 @@
|
|||||||
|
|
||||||
## 组件用法
|
## 组件用法
|
||||||
|
|
||||||
|
### 组件注册
|
||||||
|
|
||||||
|
Vant 支持多种组件注册方式,请根据实际业务需要进行选择。
|
||||||
|
|
||||||
|
#### 全局注册
|
||||||
|
|
||||||
|
全局注册后,你可以在 app 下的任意子组件中使用注册的 Vant 组件。
|
||||||
|
|
||||||
|
```js
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { Button } from 'vant';
|
||||||
|
|
||||||
|
// 方式一. 通过 Vue.use 注册
|
||||||
|
// 注册完成后,在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件
|
||||||
|
Vue.use(Button);
|
||||||
|
|
||||||
|
// 方式二. 通过 Vue.component 注册
|
||||||
|
// 注册完成后,在模板中通过 <van-button> 标签来使用按钮组件
|
||||||
|
Vue.component(Button.name, Button);
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 局部注册
|
||||||
|
|
||||||
|
局部注册后,你可以在当前组件中使用注册的 Vant 组件。
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Button } from 'vant';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
[Button.name]: Button,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
> 对于组件注册更详细的介绍,请参考 [Vue 官方文档 - 组件注册](https://cn.vuejs.org/v2/guide/components-registration.html)。
|
||||||
|
|
||||||
### 组件插槽
|
### 组件插槽
|
||||||
|
|
||||||
Vant 提供了丰富的组件插槽,通过插槽可以对组件的某一部分进行个性化定制。如果你对 Vue 的插槽不太熟悉,可以阅读 Vue 官方文档中的[插槽章节](https://cn.vuejs.org/v2/guide/components-slots.html)。下面是通过插槽来定制 Checkbox 图标的示例:
|
Vant 提供了丰富的组件插槽,通过插槽可以对组件的某一部分进行个性化定制。如果你对 Vue 的插槽不太熟悉,可以阅读 Vue 官方文档中的[插槽章节](https://cn.vuejs.org/v2/guide/components-slots.html)。下面是通过插槽来定制 Checkbox 图标的示例:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user