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/',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Enhanced',
|
||||
collapsable: false,
|
||||
children: ['/src/useRelation/'],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
@ -1,6 +1,6 @@
|
||||
# useClickAway
|
||||
|
||||
用于监听元素外部的点击事件。
|
||||
监听点击元素外部的事件。
|
||||
|
||||
## 代码演示
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
# 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