Vant3 中文入门教程 Vant3 useRelation

2024-02-25 开发教程 Vant3 中文入门教程 匿名 5

介绍

建立父子组件之间的关联关系,进行数据通信和方法调用,基于 provide 和 inject 实现。

代码演示

基本用法

在父组件中使用 useChildren 关联子组件:

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++;
};
// 向子组件提供数据和方法
linkChildren({ add, count });
},
};

在子组件中使用 useParent 获取父组件提供的数据和方法:

import { useParent } from '@vant/use';
export default {
setup() {
const { parent } = useParent(RELATION_KEY);
// 调用父组件提供的数据和方法
if (parent) {
parent.add();
console.log(parent.count.value); // -> 1
}
},
};

API

类型定义

function useParent<T>(
key: string | symbol
): {
parent?: T;
index?: Ref<number>;
};
function useChildren(
key: string | symbol
): {
children: ComponentPublicInstance[];
linkChildren: (value: any) => void;
};

useParent 返回值

参数说明类型
parent父组件提供的值any
index当前组件在父组件的所有子组件中对应的索引位置Ref<number>

useChildren 返回值

参数说明类型
children子组件列表ComponentPublicInstance[]
linkChildren向子组件提供值的方法(value: any) => void