您的位置:MYSQL中文网 > Vant3 useRelation

Vant3 useRelation

2023-04-13 00:30 Vant3中文教程

 Vant3 useRelation

介绍

建立父子组件之间的关联关系,进行数据通信和方法调用,基于 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


阅读全文
以上是MYSQL中文网为你收集整理的 Vant3 useRelation全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 MYSQL中文网 mysqlcn.com 版权所有 联系我们
桂ICP备12005667号-29 Powered by CMS