Vue は、一般的なフロントエンド フレームワークとして、コンポーネント間の対話を整理および管理するためのさまざまな方法を提供します。 Vue では、provide と inject の 2 つのメソッドを使用して、祖先コンポーネントと子孫コンポーネント間のメソッド転送を実装できます。
provide と inject は、Vue が提供する高度なコンポーネント間で通信するためのメソッドです。その機能は、祖先コンポーネントにデータを提供し、inject メソッドを使用して子孫コンポーネントでデータを受け取ることです。
provide と inject は Vue.js 2.2.0 の新機能で、親コンポーネントと子コンポーネント間の通信の代替手段です。
provide オプションは、オブジェクトまたはオブジェクトを返す関数にすることができ、その役割は、提供するデータを定義することです。 inject オプションには、配列またはオブジェクトを指定できます。配列メンバーは、注入する必要があるプロパティを表す文字列です。オブジェクト メンバーのキーはローカル バインディングの名前を表し、キー値は、ローカル バインディングによって提供されるキーです。その親コンポーネント。
provide と inject の使用は、次のシナリオで使用できます:
<template> <div> <child-comp :setData="setData"></child-comp> </div> </template> <script> import ChildComp from './ChildComp.vue'; export default { components: { ChildComp }, provide() { return { setData: this.setData } }, data() { return { text: 'Hello World' } }, methods: { setData() { this.text = 'Vue.js is awesome'; } } } </script>
<template> <div> <button @click="setData()">修改文本</button> </div> </template> <script> export default { inject: ['setData'] } </script>
以上がVue で Provide/Inject を使用して祖先コンポーネントと子孫コンポーネント間のメソッド転送を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。