import{o as a,a as n,y as t}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},e=t(`
\u5EFA\u7ACB\u7236\u5B50\u7EC4\u4EF6\u4E4B\u95F4\u7684\u5173\u8054\u5173\u7CFB\uFF0C\u8FDB\u884C\u6570\u636E\u901A\u4FE1\u548C\u65B9\u6CD5\u8C03\u7528\uFF0C\u57FA\u4E8E provide
\u548C inject
\u5B9E\u73B0\u3002
\u5728\u7236\u7EC4\u4EF6\u4E2D\u4F7F\u7528 useChildren
\u5173\u8054\u5B50\u7EC4\u4EF6:
import { ref } from 'vue';
import { useChildren } from '@vant/use';
const RELATION_KEY = Symbol('my-relation');
export default {
setup() {
const { linkChildren } = useChildren(RELATION_KEY);
const count = ref(0);
const add = () => {
count.value++;
};
// \u5411\u5B50\u7EC4\u4EF6\u63D0\u4F9B\u6570\u636E\u548C\u65B9\u6CD5
linkChildren({ add, count });
},
};
\u5728\u5B50\u7EC4\u4EF6\u4E2D\u4F7F\u7528 useParent
\u83B7\u53D6\u7236\u7EC4\u4EF6\u63D0\u4F9B\u7684\u6570\u636E\u548C\u65B9\u6CD5:
import { useParent } from '@vant/use';
export default {
setup() {
const { parent } = useParent(RELATION_KEY);
// \u8C03\u7528\u7236\u7EC4\u4EF6\u63D0\u4F9B\u7684\u6570\u636E\u548C\u65B9\u6CD5
if (parent) {
parent.add();
console.log(parent.count.value); // -> 1
}
},
};
function useParent<T>(key: string | symbol): {
parent?: T;
index?: Ref<number>;
};
function useChildren(key: string | symbol): {
children: ComponentPublicInstance[];
linkChildren: (value: any) => void;
};
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B |
---|---|---|
parent | \u7236\u7EC4\u4EF6\u63D0\u4F9B\u7684\u503C | any |
index | \u5F53\u524D\u7EC4\u4EF6\u5728\u7236\u7EC4\u4EF6\u7684\u6240\u6709\u5B50\u7EC4\u4EF6\u4E2D\u5BF9\u5E94\u7684\u7D22\u5F15\u4F4D\u7F6E | Ref<number> |
\u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B |
---|---|---|
children | \u5B50\u7EC4\u4EF6\u5217\u8868 | ComponentPublicInstance[] |
linkChildren | \u5411\u5B50\u7EC4\u4EF6\u63D0\u4F9B\u503C\u7684\u65B9\u6CD5 | (value: any) => void |