VUE3 入門: Provide/Inject を使用してコンポーネント間で共有する

VUE は、高い使いやすさ、強力な柔軟性、優れたパフォーマンスという利点を備えた最新のフロントエンド フレームワークで、フロントエンド開発者の間で人気が高まっており、好まれています。 VUE3 バージョンは、パフォーマンス、アーキテクチャ設計が向上し、さらにユーザーフレンドリーになっています。 VUE3 は、コンポーネント間でデータを共有する新しい方法 (提供/挿入) を提供します。この記事では、provide/injectの使い方と実装プロセスを詳しく紹介します。

概要

provide/inject は、コンポーネント間でデータを共有するために VUE3 によって公式に推奨されている方法です。 VUE2 では、props/$emit と Vuex を介してコンポーネント間のデータ通信を実装することがよくあります。 Provide/Inject の最大の特徴は、より暗黙的な方法でデータ共有を実装し、コードをより読みやすく、保守しやすくすることです。

provide/inject の使用法

provide/inject の使用法は非常に簡単です。以下にいくつかの例を示します:

親コンポーネントはデータを提供します

<template>
  <child-component />
</template>

<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    provide('message', 'Hello from parent')
  }
}
</script>

In親コンポーネントでは、provide メソッドを通じて message という名前のデータを提供し、その値を「Hello fromparent」に設定します。次に、サブコンポーネントで inject を使用してこのデータを取得できます:

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

サブコンポーネントでは、inject メソッドを使用して message という名前のデータを取得します。この時点で、このデータは template で使用できます。

サブコンポーネントはデータを提供します

<template>
  <child-component />
</template>

<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  setup() {
    const message = ref('Hello from parent')
    return { message }
  },
  provide: {
    message: this.message
  }
}
</script>

この例では、親コンポーネントに message という名前の応答データを定義し、その値を「Hello fromparent」に設定します。次に、provide メソッドを介してこのデータを子コンポーネントに提供します。子コンポーネントでは、inject メソッドを通じてメッセージを取得し、それをテンプレートで使用します。

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
</script>

ここで定義するメッセージ データは応答型であることに注意してください。

provide/inject の実装プロセス

provide/inject の実装は、VUE3 の新しい応答システムに依存します。 VUE3 では、provide / inject は provideParent / injectSetupRef に依存して機能します。 ProvideParent 関数は Provide メソッドと似ており、データのキー名と値を受け取りますが、injectSetupRef は親コンポーネントからデータを取得するために使用されます。具体的な実装プロセスは次のとおりです。

// provide函数
export function provide(key, value) {
  const vm = getCurrentInstance();
  if (!vm) {
    console.warn(`provide() can only be used inside setup().`);
  } else {
    let provides  = vm.provides;
    const parent = vm.parent;
    if (provides === EMPTY_OBJ) provides = vm.provides = Object.create(parent.provides);
    provides[key] = value;
  }
}

// inject函数
export function inject(key, defaultValue) {
  const vm = getCurrentInstance();
  if (vm) {
    const provides = vm.parent.provides;
    if (key in provides) {
      return provides[key];
    } else if (arguments.length > 1) {
      return defaultValue;
    } else {
      console.warn(`injection "${String(key)}" not found.`);
    }
  } else {
    console.warn(`inject() can only be used inside setup() or functional components.`);
  }
}

provide 関数では、getCurrentInstance 関数を通じて現在のインスタンスを取得し、提供されたデータを現在のインスタンスの Provides オブジェクトに保存します。現在のインスタンスが存在しない場合は、setup 関数で Provide 関数が呼び出されず、警告メッセージが返されることを意味します。

inject 関数では、getCurrentInstance 関数を通じて現在のインスタンスも取得し、親コンポーネントの Provides オブジェクトからキーに対応する値を取得します。キーに対応する値が存在しない場合は、defaultValue が返されます。現在のインスタンスが存在しない場合は、setup 関数または機能コンポーネントで inject 関数が呼び出されなかったことを意味し、警告メッセージが返されます。

概要

この記事の導入部を通じて、provide/inject が VUE3 コンポーネント間でデータを共有する優れた方法であることがわかります。より暗黙的な方法でデータ共有を実装し、コードをより読みやすく、保守しやすくします。使用中、提供されるデータは応答性があり、ネストされたコンポーネントで使用できることに注意してください。同時に、提供するデータがprovideに存在しない場合、arguments[1]で渡されたパラメータがデフォルト値として使用されることにも注意してください。とパラメータの値。

以上がVUE3 入門: Provide/Inject を使用してコンポーネント間で共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。