Vue3 における provide と inject の使用法と原則

序文：

親コンポーネントと子コンポーネント間でデータを渡す場合、通常は props と emitting を使用します。親から子にデータを渡す場合は props を使用します。親コンポーネントが孫コンポーネントに渡す場合は、まず子コンポーネントに渡し、次に子コンポーネントが孫コンポーネントに渡す必要があります。子コンポーネントが複数ある場合や孫コンポーネントが複数ある場合は、何度も渡す必要があり、非常に面倒になります。

このような場合、 provideとinject使用してこの問題を解決できます。コンポーネントがどれだけ深くネストされていても、親コンポーネントはすべての子コンポーネントまたは孫コンポーネントにデータを提供できます。親コンポーネントはprovideを使用してデータを提供して、子または孫コンポーネントはinjectデータを注入します。同時に、兄弟コンポーネント間で値を転送する方が便利になります。

1. Vue2でのprovide / injectの使用

provide: はプロパティと値を含むオブジェクトです。のように：

提供する：{

 情報:"値"

}

provide data内のデータを使用する必要がある場合、このように記述するとエラーが発生します。コンポーネントインスタンスpropertyにアクセスするときは、 provideオブジェクトを返す関数に変換する必要があります。

提供する（）{

 戻る {

  情報: this.msg

 }

}

inject : 文字列の配列です。のように：

挿入: [ 'info' ]

上記の provide によって提供される情報データを受け取ります。これは、from 属性と default 属性を含むオブジェクトにすることもできます。From は、挿入されたコンテンツで検索するために使用されるキーであり、default 属性はデフォルト値を指定するためのものです。

vue2 プロジェクト/注入アプリケーションの場合:

//親コンポーネントエクスポートデフォルト{

 提供する：{

  info:"データを提供する"

 }

}

//サブコンポーネントエクスポートデフォルト{

 挿入:['情報'],

 マウントされた(){

     console.log("データの受信:", this.info) // データの受信: データの提供}

}

provide / injectメッセージのサブスクライブと公開に似ています。 provideデータを提供または送信し、 injectデータを受信します。

2. Vue3でのprovide / injectの使用

結合されたAPIでprovide/injectを使用します。どちらもsetup中にのみ呼び出すことができます。使用する前に、 vueからprovide/injectメソッドを明示的にインポートする必要があります。

provide 関数は次の 2 つのパラメータを受け取ります。

provide( name,value )

name : 提供されたpropertyのnameを定義します。
value : propertyの値。

使用する場合:

「vue」から{provide}をインポートします

エクスポートデフォルト{

  設定（）{

    provide('情報',"値")

  }

}

inject 関数は次の 2 つのパラメータを取ります。

inject(name,default)

name : provideによって提供される属性名を受け取ります。
default : デフォルト値を設定します。これはオプションです。

使用する場合:

「vue」からインポートします。

エクスポートデフォルト{

  設定（）{

    inject('info',"デフォルト値を設定")

  }

}

完全な例 1 : provide/inject例

//親コンポーネントコード <script>

「vue」から{provide}をインポートします

エクスポートデフォルト{

  設定（）{

    provide('情報',"値")

  }

}

</スクリプト>

//サブコンポーネントコード <テンプレート>

 {{情報}}

</テンプレート>

<スクリプト>

「vue」からインポートします。

エクスポートデフォルト{

  設定（）{

    const info = inject('info')

    戻る {

      情報

    }

  }

}

</スクリプト>

3. 応答性を高める

provide/injectに応答性を追加するには、 refまたはreactive使用します。

完全な例2 : レスポンシブprovide/inject

//親コンポーネントコード <テンプレート>

  <div>

    情報：{{info}}

    <InjectCom></InjectCom> </ ...

  </div>

</テンプレート>

<スクリプト>

InjectCom を「./InjectCom」からインポートします。

"vue" から { provide,readonly,ref } をインポートします。

エクスポートデフォルト{

  設定（）{

    let info = ref("今日は勉強しましたか?")

    タイムアウトを設定します(()=>{

      info.value = "言い訳をしないで、今すぐ学び始めましょう"

    },2000)

    提供する('情報',情報)

    戻る {

      情報

    }

  },

  コンポーネント:{

    インジェクトコム

  }

}

</スクリプト>

// InjectCom サブコンポーネント コード <テンプレート>

 {{情報}}

</テンプレート>

<スクリプト>

「vue」からインポートします。

エクスポートデフォルト{

  設定（）{

    const info = inject('info')

    タイムアウトを設定します(()=>{

      info.value = "更新"

    },2000)

    戻る {

      情報

    }

  }

}

</スクリプト>

上記の例では、親コンポーネントと子コンポーネントの両方でinfoの値が変更されます。

provide / inject 、 vueの一方向データフローに従ったメッセージのサブスクリプションとパブリッシュに似ています。これはどういう意味ですか?つまり、データは存在する場所でのみ変更できます。データが送信される時点では変更できないため、予測できない状態になりやすくなります。

サブスクリプションコンポーネント内で値を変更する場合は、正常に変更できます。他のコンポーネントでも値を使用すると状態が混乱する可能性があるため、発生源で問題を回避する必要があります。

readonly 、使用前に導入する必要がある読み取り専用関数です。変数にreadonly属性を追加すると、データの読み取りのみが可能になり、変更はできなくなります。変更すると警告が発行されますが、値は変更されません。

方向：

「vue」から読み取り専用をインポートします

let info = readonly('読み取り専用情報値')

タイムアウトを設定する(()=>{

 info="情報を更新" // 2秒後に情報の値を更新します},2000)

2 秒間実行した後、ブラウザは情報値を変更できないことを示す警告を発します。

そのため、プロバイダーによって発行されたデータに変更が加えられないように、読み取り専用属性をprovideによって発行されたデータに追加します。

完全な例 2 に readonly を追加します。

提供('info'、読み取り専用(info))

サブコンポーネントが値を変更すると、読み取り専用のリマインダーが表示されます。

値を変更する場合、公開されたデータprovideコンポーネント内のデータも変更する必要があるため、変更メソッドがコンポーネントに追加され、同時に公開され、子コンポーネントで呼び出すことができます。

のように：

//公開 let info = ref("今日は勉強しましたか?")

定数changeInfo = (val)=>{

 情報値 = val

}

提供('情報'、読み取り専用(情報))

提供する('changeInfo',changeInfo)



//サブスクリプション const chang = inject('changeInfo')

chang('フロントエンドエンジニアに急ぐ')

完全な例3:データの変更

// 親コンポーネントコード <テンプレート>

  <div>

    情報：{{info}}

    <InjectCom></InjectCom> </ ...

  </div>

</テンプレート>



<スクリプト>

InjectCom を "./InjectCom" からインポートします。

"vue" から { provide,readonly,ref } をインポートします。

エクスポートデフォルト{

  設定（）{

    let info = ref("今日は勉強しましたか?")

    定数changeInfo = (val)=>{

      情報値 = val

    }

    提供('情報'、読み取り専用(情報))

    提供する('changeInfo',changeInfo)

    戻る {

      情報

    }

  },

  コンポーネント:{

    インジェクトコム

  }

}

</スクリプト>



//InjectCom サブコンポーネント コード <テンプレート>

  <div>

    <button @click="chang('フロントエンドエンジニアに急ぐ')">値を更新</button>

  </div>

</テンプレート>

<スクリプト>

「vue」からインポートします。

エクスポートデフォルト{

  設定（）{

    const info = inject('info')

    const chang = inject('changeInfo')

    戻る {

      情報、

      チャン

    }

  }

}

</スクリプト>

これで、 vue3でのprovideとinjectの使用法と原則に関するこの記事は終わりです。vue3 での provide と inject に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: