介紹

建立父子組件之間的關聯(lián)關系，進行數(shù)據(jù)通信和方法調用，基于 provide 和 inject 實現(xiàn)。

代碼演示

基本用法

在父組件中使用 useChildren 關聯(lián)子組件:

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++;
    };

    // 向子組件提供數(shù)據(jù)和方法
    linkChildren({ add, count });
  },
};

在子組件中使用 useParent 獲取父組件提供的數(shù)據(jù)和方法:

import { useParent } from '@vant/use';

export default {
  setup() {
    const { parent } = useParent(RELATION_KEY);

    // 調用父組件提供的數(shù)據(jù)和方法
    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 返回值

useChildren 返回值