Vue3 provideしたコンポーネントでinject

data codes through eyeglasses NuxtJS
Photo by Kevin Ku on Pexels.com
この記事は約1分で読めます。

vee-validateを見ていて、なるほどこれは参考になると思ったのでメモ。

provide/injectについて、provideで提供したオブジェクトは子ノードでinjectすることで子ノード内に依存関係を持ち込むことができる。provideしたコンポーネント自身でinjectしたい場合(injectしたように)はどうすればよいのか。vee-validateでは以下のようにしていた。

// @see https://github.com/logaretm/vee-validate
export function injectWithSelf<T>(symbol: InjectionKey<T>, def: T | undefined = undefined): T | undefined {
  const vm = getCurrentInstance() as any

  return vm?.provides[symbol as any] || inject(symbol, def)
}

参照元:https://github.com/logaretm/vee-validate/blob/main/packages/vee-validate/src/utils/common.ts#L143

コメント

タイトルとURLをコピーしました