docs: update global method guide

This commit is contained in:
chenjiahan 2020-08-20 23:26:34 +08:00
parent 7cadc5e60f
commit 9a86e9e6ca
7 changed files with 27 additions and 7 deletions

View File

@ -81,7 +81,7 @@ GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。
<van-field :model-value="value" @update:model-value="onInput" />
```
### 其他组件 v-model 调整
### 其他 v-model 调整
- Circle: `v-model` 重命名为 `v-model:currentRate`
- CouponList: `v-model` 重命名为 `v-model:code`
@ -113,3 +113,23 @@ GoodsAction 商品导航组件重命名为 **ActionBar 行动栏**。
- GoodsActionIcon
同时内部使用的 Info 组件也会重命名为 Badge。
### 注册全局方法
Vant 2.x 中默认提供了 `$toast``$dialog` 等全局方法,但 Vue 3.0 不再支持直接在 Vue 的原型链上挂载方法,因此从 Vant 3.0 开始,使用全局方法前必须先通过 `app.use` 将组件注册到对应的 app 上。
```js
import { Toast, Dialog, Notify } from 'vant';
// 将 Toast 等组件注册到 app 上
app.use(Toast);
app.use(Dialog);
app.use(Notify);
// app 内的子组件可以直接调用 $toast 等方法
export default {
mounted() {
this.$toast('提示文案');
},
};
```

View File

@ -88,7 +88,7 @@ Dialog.confirm({
### Global Method
After import the Dialog component, the `$dialog` method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
After registering the Dialog component through `app.use`, the `$dialog` method will be automatically mounted on all subcomponents of the app.
```js
export default {

View File

@ -116,7 +116,7 @@ Dialog.confirm({
### 全局方法
引入 Dialog 组件后,会自动在 Vue 的 prototype 上挂载 `$dialog` 方法,在所有组件内部都可以直接调用此方法。
通过 `app.use` 注册 Dialog 组件后,会自动在 app 的所有子组件上挂载 `$dialog` 方法,在所有组件内部都可以直接调用此方法。
```js
export default {

View File

@ -43,7 +43,7 @@ Notify({
### Global Method
After import the Notify component, the `$notify` method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
After registering the Notify component through `app.use`, the `$notify` method will be automatically mounted on all subcomponents of the app.
```js
export default {

View File

@ -78,7 +78,7 @@ Notify({
### 全局方法
引入 Notify 组件后,会自动在 Vue 的 prototype 上挂载 `$notify` 方法,便于在组件内调用。
通过 `app.use` 注册 Notify 组件后,会自动在 app 的所有子组件上挂载 `$notify` 方法,便于在组件内调用。
```js
export default {

View File

@ -77,7 +77,7 @@ const timer = setInterval(() => {
### Global Method
After import the Toast component, the `$toast` method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
After registering the Toast component through `app.use`, the `$toast` method will be automatically mounted on all subcomponents of the app.
```js
export default {

View File

@ -90,7 +90,7 @@ const timer = setInterval(() => {
### 全局方法
引入 Toast 组件后,会自动在 Vue 的 prototype 上挂载 `$toast` 方法,便于在组件内调用。
通过 `app.use` 注册 Toast 组件后,会自动在 app 的所有子组件上挂载 `$toast` 方法,便于在组件内调用。
```js
export default {