Establish the association relationship between parent and child components, perform data communication and method invocation, based on provide and inject implementation.
Use useChildren in parent to associate child components:
import { ref } from 'vue';\nimport { useChildren } from '@vant/use';\n\nconst RELATION_KEY = Symbol('my-relation');\n\nexport default {\n setup() {\n const { linkChildren } = useChildren(RELATION_KEY);\n\n const count = ref(0);\n const add = () => {\n count.value++;\n };\n\n // provide data and methods to children\n linkChildren({ add, count });\n },\n};\nUse useParent in child component to get the data and methods provided by parent.
import { useParent } from '@vant/use';\n\nexport default {\n setup() {\n const { parent } = useParent(RELATION_KEY);\n\n // use data and methods provided by parent\n if (parent) {\n parent.add();\n console.log(parent.count.value); // -> 1\n }\n },\n};\nfunction useParent<T>(key: string | symbol): {\n parent?: T;\n index?: Ref<number>;\n};\n\nfunction useChildren(key: string | symbol): {\n children: ComponentPublicInstance[];\n linkChildren: (value: any) => void;\n};\n| Name | \nDescription | \nType | \n
|---|---|---|
| parent | \nData and methods provided by parent | \nany | \n
| index | \nIndex position of the current component in all child of the parent component | \nRef<number> | \n
| Name | \nDescription | \nType | \n
|---|---|---|
| children | \nComponent list of children | \nComponentPublicInstance[] | \n
| linkChildren | \nFunction to provide values to child | \n(value: any) => void | \n