vueの中のprovide/injectを簡単に分析して何の用途がありますか？

1.はじめに
vueの親子コンポーネント通信は何を使いますか？
：propと$emitの組み合わせ。
孫さんのセットなら？
：親のコンポーネントでデータとイベントを転送します。
太おじいさんと孫のセットなら？
もちろんvuexです
はい、私は何の用事もありません。今行きます。
だめです。もう少し頑張ってもいいです。確かに一部の兄弟がやっているプロジェクトは小さいです。コンポーネント通信の状況はそんなに多くないです。vuexを導入するのが億劫です。それではprovide/injectは孫さんです。通信問題の一番いい解決策です。
2.公式文書の写した紹介
このオプションは、コンポーネントの階層がどれほど深いかに関わらず、祖先のコンポーネントがその子孫の子孫に一つの依存性を注入することを可能にするために一緒に使用され、上下関係が成立するまでの時間にわたって常に有効である。
プロvideのオプションは

オブジェクトまたはオブジェクトの関数を返します。オブジェクトには、その子孫を注入する属性が含まれています。このオブジェクトでは、keyとしてES 2015 Symborsを使用できますが、元の世代がSymbolとReflect.ownKeysをサポートする環境でのみ動作できます。

injectオプションは、

文字列配列、または

オブジェクト（詳細ポイントをクリックします ここです）

3.基本的な使い方

//        foo
//   
export default {
 name: "grandfather",
 provide(){
  return{
   foo:'halo'
  }
 },
}
//   
export default {
 name: "grandfather",
 provide:{
  foo:'halo~~~~'
 },
}
//       foo
export default {
 inject:['foo'],
}

上の二つの用法は何の違いがありますか？

もしあなたが文字列を伝えるだけなら、上の「Halo」のように、区別がなく、後代まで読めます。

もしあなたがオブジェクト（以下のコード）を送る必要があるなら、2番目はパスできません。次のコンポーネントはデータを得られません。最初の

だけ書くことを勧めます。

//          
provide(){
  return{
   test:this.msg
  }
 },

上記の例のfooのようなデータが注入されると、このコンポーネントはfooというデータを宣言できなくなります。
4.いつが応答できるのですか？
もしあなたがvuexを使ったことがあるなら、上の例で私が foo:'halo'を変更します foo:'world'は、サブアセンブリがデータ変更に応答して、ビューの更新が完了します。
残念ですが、ありません
vue公式文書にはこのような言葉があります。
ヒント：provideとinjectのバインディングは応答できません。これは故意にやったのです。しかし、傍受可能なオブジェクトが入ってきたら、オブジェクトの属性はまだ応答可能です。
ここではvueがなぜこのように設計されているのかを検討しません。ここではいつまでprovide/injectを展示しますか？

provide(){
 return{
  test:this.msg
 }
},
data() {
 return {
  msg: "Welcome to Your Vue.js App",
 }
}
mounted(){
 setTimeout(()=>{
  this.msg = "halo world";
  console.log(this._provided.msg)
  //log：Welcome to Your Vue.js App
 },3000)
},

上記のようにしてはいけません。プリントアウトしました。 providedのデータは変更されていません。サブコンポーネントの取得値も変わりません。
直接にあげてもいいです。 this._provided.msg賦課は、しかし にしても _provided.msgの中の値が変わりましたが、サブアセンブリの評価は依然として変わりません。
次のようにすると、応答できます。

provide(){
 return{
  test:this.activeData
 }
},
data() {
 return {
  activeData:{name:'halo'},
 }
}
mounted(){
 setTimeout(()=>{
  this.activeData.name = 'world';
 },3000)
}

これはvueに書いてあります。 オブジェクトの属性は応答可能です。
しかし、傍受可能なオブジェクトが入ってきたら、オブジェクトの属性はまだ応答可能です。
5.グローバル変数の実現
グローバル変数？provide/injectは先祖から子孫にしか伝えられないのではないですか？そうです。一番上のコンポーネントに結び付ければいいです。
あなたです ap.vue
私たちは実例を全部後代に投げます。

//app.vue
export default {
 name: 'App',
 provide(){
  return{
   app:this
  }
 },
 data(){
  return{
   text:"it's hard to tell the night time from the day"
  }
 },
 methods:{
  say(){
   console.log("Desperado, why don't you come to your senses?")
  }
 }
}
//       ，       ，       app  
export default {
 inject:['foo','app'],
 mounted(){
  console.log(this.app.text);//  app    
  this.app.say();//    app    ，       ！
 }
}

これも応答ですよ。
6.ページの更新を実現する
1.vue-routerで現在のページに再ルーティングします。ページは更新されません。
2.window.reload（）を採用したり、router.go（0）を更新した時、ブラウザ全体が再読み込み、点滅し、体験がよくないです。
どうすればいいですか？
上の原理と同じです。私たちはルートを制御するコンポーネントに関数を書きます。 v-if制御 router-viewの表示が隠れています。ここの原理は説明しないでください。この関数を後代に伝えて、後代のコンポーネントの中でこの方法を呼び出してルーティングを更新します。

//app.vue
<router-view v-if="isShowRouter"/>
export default {
 name: 'App',
 provide(){
  return{
   reload:this.reload
  }
 },
 data(){
  return{
   isShowRouter:true,
  }
 },
 methods:{
  reload(){
   this.isShowRouter = false;
   this.$nextTick(()=>{
    this.isShowRouter = true;
   })
  }
 }
}
//    
export default {
 inject:['reload'], 
}

7.末尾
vueにはこんなヒントがあります。
注意：provideとinjectは主に高次プラグイン/コンポーネントライブラリの用例を提供します。アプリケーションコードに直接使用することは推奨されていません。
provide/injectは普段使っているものが少なくて、コンポーネントを開発するために使われることが多いですが、場合によっては使いやすいです。
業務が膨大で複雑なのは、やはり使いたいです。 vuex~
締め括りをつける
以上述べたのは小编がみんなに绍介したvueの中のprovide/injectです。