Vue3 inject() 関数
Vue3 オプション APIinject()関数は Vue3 が提供する API であり、子コンポーネントで親コンポーネントまたは祖先コンポーネントを介してprovide()関数によって提供される依存関係を取得するために使用されます。これは主に、コンポーネントツリーが深い場合のコンポーネント間のデータ受け渡しに使用されます。
基本構文
例
import { inject } from 'vue';
const value = inject(key, defaultValue);
const value = inject(key, defaultValue);
- key: 注入する依存関係の一意の識別子を表す文字列または Symbol。
- defaultValue: オプションのパラメータです。対応する依存関係が見つからない場合は、デフォルト値を返します。
使用シーン
inject()通常はprovide()と組み合わせて使用し、以下のシーンに適しています。
- 階層をまたぐコンポーネント間通信：コンポーネントの階層が深い場合、
provide()とinject()props を階層ごとに渡す手間を避けられます。 - グローバル状態管理：小規模なアプリケーションでは、
provide()とinject()Vuex などの状態管理ツールの代わりに使用できます。 - プラグイン開発：プラグインでグローバルな機能や設定を提供する場合、
inject()便利なツールです。
コード例
親コンポーネントで provide() を使用してデータを提供する
例
import { provide, ref } from 'vue';
export default {
setup() {
const message = ref('Hello, Vue3!');
provide('message', message); // データを提供
}
};
export default {
setup() {
const message = ref('Hello, Vue3!');
provide('message', message); // データを提供
}
};
子コンポーネントで inject() を使用してデータを取得する
例
import { inject } from 'vue';
export default {
setup() {
const message = inject('message', 'Default Message'); // データを注入
return { message };
}
};
export default {
setup() {
const message = inject('message', 'Default Message'); // データを注入
return { message };
}
};
注意事項
- 依存関係のリアクティビティ：もし
provide()提供されるデータがリアクティブである場合（たとえばref或reactive）、子コンポーネントでinject()取得したデータもリアクティブになります。 - デフォルト値の機能：対応する依存関係が見つからない場合、
inject()デフォルト値を返します。実行時エラーを避けるために、常にデフォルト値を設定することをお勧めします。 - 乱用を避ける：とはいえ
provide()とinject()とても便利ですが、乱用するとコンポーネント間の結合度が高まる可能性があるため、必要な場合にのみ使用することをお勧めします。
その他の拡張