mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs(@vant/use): add useRelation doc
This commit is contained in:
parent
56d4e90cca
commit
32697cafad
@ -33,6 +33,11 @@ module.exports = {
|
|||||||
'/src/useWindowSize/',
|
'/src/useWindowSize/',
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Enhanced',
|
||||||
|
collapsable: false,
|
||||||
|
children: ['/src/useRelation/'],
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# useClickAway
|
# useClickAway
|
||||||
|
|
||||||
用于监听元素外部的点击事件。
|
监听点击元素外部的事件。
|
||||||
|
|
||||||
## 代码演示
|
## 代码演示
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
# useEventListener
|
# useEventListener
|
||||||
|
|
||||||
用于事件绑定,在 `mounted` 和 `activated` 时调用 `addEventListener`,在 `unmounted` 和 `deactivated` 时调用 `removeEventListener`。
|
方便地进行事件绑定,在组件 `mounted` 和 `activated` 时绑定事件,`unmounted` 和 `deactivated` 时解绑事件。
|
||||||
|
|
||||||
## 代码演示
|
## 代码演示
|
||||||
|
|
||||||
|
77
packages/vant-use/src/useRelation/README.md
Normal file
77
packages/vant-use/src/useRelation/README.md
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
# useRelation
|
||||||
|
|
||||||
|
建立父子组件之间的关联关系,进行数据通信和方法调用,基于 `provide` 和 `inject` 实现。
|
||||||
|
|
||||||
|
## 代码演示
|
||||||
|
|
||||||
|
### 基本用法
|
||||||
|
|
||||||
|
```js
|
||||||
|
// Parent.vue
|
||||||
|
import { useChildren } from '@vant/use';
|
||||||
|
|
||||||
|
const RELATION_KEY = 'my-relation';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const { linkChildren } = useChildren(RELATION_KEY);
|
||||||
|
|
||||||
|
const count = ref(0);
|
||||||
|
const add = () => {
|
||||||
|
count.value++;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 向子组件提供数据和方法
|
||||||
|
linkChildren({ add, count });
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
// Child.vue
|
||||||
|
import { useParent } from '@vant/use';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const { parent } = useParent(RELATION_KEY);
|
||||||
|
|
||||||
|
// 调用父组件提供的数据和方法
|
||||||
|
if (parent) {
|
||||||
|
parent.add();
|
||||||
|
console.log(parent.count.value); // -> 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### 类型定义
|
||||||
|
|
||||||
|
```ts
|
||||||
|
function useParent<T>(
|
||||||
|
key: string
|
||||||
|
): {
|
||||||
|
parent?: T;
|
||||||
|
index?: Ref<number>;
|
||||||
|
};
|
||||||
|
|
||||||
|
function useChildren(
|
||||||
|
key: string
|
||||||
|
): {
|
||||||
|
children: ComponentPublicInstance[];
|
||||||
|
linkChildren: (value: any) => void;
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### useParent 返回值
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 |
|
||||||
|
| ------ | -------------------------------------------- | -------------- |
|
||||||
|
| parent | 父组件提供的值 | _any_ |
|
||||||
|
| index | 当前组件在父组件的所有子组件中对应的索引位置 | _Ref\<number>_ |
|
||||||
|
|
||||||
|
### useChildren 返回值
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 |
|
||||||
|
| ------------ | -------------------- | --------------------------- |
|
||||||
|
| children | 子组件列表 | _ComponentPublicInstance[]_ |
|
||||||
|
| linkChildren | 向子组件提供值的方法 | _(value: any) => void_ |
|
Loading…
x
Reference in New Issue
Block a user