ホームページ > 記事 > ウェブフロントエンド > VUE3 入門: Provide/Inject を使用してコンポーネント間で共有する
VUE は、高い使いやすさ、強力な柔軟性、優れたパフォーマンスという利点を備えた最新のフロントエンド フレームワークで、フロントエンド開発者の間で人気が高まっており、好まれています。 VUE3 バージョンは、パフォーマンス、アーキテクチャ設計が向上し、さらにユーザーフレンドリーになっています。 VUE3 は、コンポーネント間でデータを共有する新しい方法 (提供/挿入) を提供します。この記事では、provide/injectの使い方と実装プロセスを詳しく紹介します。
provide/inject は、コンポーネント間でデータを共有するために VUE3 によって公式に推奨されている方法です。 VUE2 では、props/$emit と Vuex を介してコンポーネント間のデータ通信を実装することがよくあります。 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 の実装は、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 サイトの他の関連記事を参照してください。