diff --git a/packages/vant-use/.vuepress/config.js b/packages/vant-use/.vuepress/config.js index e01abac89..39361f9c9 100644 --- a/packages/vant-use/.vuepress/config.js +++ b/packages/vant-use/.vuepress/config.js @@ -33,6 +33,11 @@ module.exports = { '/src/useWindowSize/', ], }, + { + title: 'Enhanced', + collapsable: false, + children: ['/src/useRelation/'], + }, ], }, }; diff --git a/packages/vant-use/src/useClickAway/README.md b/packages/vant-use/src/useClickAway/README.md index 2e5df9937..39c83b36a 100644 --- a/packages/vant-use/src/useClickAway/README.md +++ b/packages/vant-use/src/useClickAway/README.md @@ -1,6 +1,6 @@ # useClickAway -用于监听元素外部的点击事件。 +监听点击元素外部的事件。 ## 代码演示 diff --git a/packages/vant-use/src/useEventListener/README.md b/packages/vant-use/src/useEventListener/README.md index 3d6bf7468..3df4ecbcd 100644 --- a/packages/vant-use/src/useEventListener/README.md +++ b/packages/vant-use/src/useEventListener/README.md @@ -1,6 +1,6 @@ # useEventListener -用于事件绑定,在 `mounted` 和 `activated` 时调用 `addEventListener`,在 `unmounted` 和 `deactivated` 时调用 `removeEventListener`。 +方便地进行事件绑定,在组件 `mounted` 和 `activated` 时绑定事件,`unmounted` 和 `deactivated` 时解绑事件。 ## 代码演示 diff --git a/packages/vant-use/src/useRelation/README.md b/packages/vant-use/src/useRelation/README.md new file mode 100644 index 000000000..b6a674935 --- /dev/null +++ b/packages/vant-use/src/useRelation/README.md @@ -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( + key: string +): { + parent?: T; + index?: Ref; +}; + +function useChildren( + key: string +): { + children: ComponentPublicInstance[]; + linkChildren: (value: any) => void; +}; +``` + +### useParent 返回值 + +| 参数 | 说明 | 类型 | +| ------ | -------------------------------------------- | -------------- | +| parent | 父组件提供的值 | _any_ | +| index | 当前组件在父组件的所有子组件中对应的索引位置 | _Ref\_ | + +### useChildren 返回值 + +| 参数 | 说明 | 类型 | +| ------------ | -------------------- | --------------------------- | +| children | 子组件列表 | _ComponentPublicInstance[]_ | +| linkChildren | 向子组件提供值的方法 | _(value: any) => void_ |