小菜鳥のVue-provide/inject帰らない道

前言
どうして私はこのような文章を書くのですか.ネット上にはprovide/injectに関する技術的な文章がたくさんあるのではないでしょうか.原因はネット上のあれらのブログの大牛の文章が完璧に穴を避けることができて、私のこの文章は穴を掘って穴を埋める過程を説明します
provide/injectとは何ですか
注入に依存して、公式サイトの説明は私がこの文章を書かないことを阻止することはできません.原因は簡単です.公式サイトは古い菜鳥の手当たり次第のメモにすぎません.菜鳥はまだ成長しなければなりません.それは私のいくつかの問題を解決することはできません.
使用時
親子コンポーネントのインタラクションは多様で、props、vuex、$refs、$emit、localStorage、そしてこのprovide/injectです.それは階層の比較的に深いコンポーネントに適して、例えば子、子孫、子孫の子孫のコンポーネントはいくつか親コンポーネントのある属性を使って、このprovide/injectを使うことができて、それは大量の煩雑な伝値コードを書くことを避けることができて、私はここでどうしてそれを使うのですか?私の知識ベースの詳細親コンポーネントには多くのサブコンポーネントが含まれています.各サブコンポーネントには親コンポーネントの知識ベースIDが必要です.このとき、propsを大量に書きたくなくて、provide/injectで値を伝えます.
レスポンス最終版
このコード構造を急いで書き換えるとprovide/inject応答伝達が完了する

   data() {
      return {
        knowledge: {
          knowledgeId: ''
        }
      }
    },
    provide() {
      return {
        //      
        kData: this.knowledge
      }
    },
    created() {
      //   data  knowledge  knowledgeId   
      this.knowledge.knowledgeId = 2
    }

サブアセンブリの使用

    inject: ['kData'],
    mounted() {
      console.error('yc:' + this.kData.knowledgeId)
    }

穴はどこだ?
ピットはprovideで、サブコンポーネントinjectは難しくありません

第1版試み

次のコードはサブコンポーネントでこのkIdの値を取得することはできませんが、ネット上にprovide:{}という定義の書き方があります.彼らが成功したのはkId:'xxx'の後に定義された静的文字列であり、dataのknowledgeId属性を動的に取得するのではありません.

    data() {
      return {
        knowledgeId: 1
      }
    },
    provide: {
      kId: this.knowledgeId
    }

第2版試み

上の第1版の問題はとても解決して、ネット上でもう1つの書き方がprovide関数を通じて1つのオブジェクトを返すので、これはdataの中の属性の内容を得ることができます

    data() {
      return {
        knowledgeId: 1
      }
    },
    provide() {
      return {
        kId: this.knowledgeId
      }
    }

第3版試み

第2版は問題ないように見えますが、このdataのknowledgeIdプロパティをどこかで変更する場合は、サブコンポーネントは取得できません.どうすれば解決しますか?https://www.jianshu.com/p/ae0...ああ、この文章は次のように述べています.
ヒント:provideとinject
バインドは応答可能ではありません.これはわざとやったのだ.しかし、リスニング可能なオブジェクトが送信された場合、そのオブジェクトのプロパティは応答可能です.
上で本質を話したが、老菜鳥はすべて知っていて、菜鳥は茫然として理解していないので、私がこの文章を書かないことを止めることができなくて、原因はそれがこの監視対象がどんなことを言っていないからだ.転送されたオブジェクトはprovideのオブジェクトですか、dataのオブジェクトですか.第3版はprovideでオブジェクトを転送するように書き換えられた

   data() {
      return {
        knowledgeId: ''
      }
    },
    provide() {
      return {
        pData: {
          kId: this.knowledgeId
        }
      }
    },
    mounted() {
      //   data  knowledgeId  
      this.knowledgeId = 2
    }

第4版試み

第3版の書き方はサブアセンブリでは変更後のknowledgeIdの内容を取得できないので、dataにオブジェクトをパッケージしますが、やはりだめです.第5版の書き換えはすぐに始まります

    data() {
      return {
        knowledge: {
          knowledgeId: ''
        }
      }
    },
    provide() {
      return {
        kId: this.knowledge.knowledgeId
      }
    },
    mounted() {
      this.knowledge.knowledgeId = 2
    }

第5版試み

嬉しいことに、この版は終結版で、サブコンポーネントでknowledgeIdを取得することができます.原理は何ですか.誰が気にしているのか、他人の道具を使って、楽しく使えばいい.

    data() {
      return {
        knowledge: {
          knowledgeId: ''
        }
      }
    },
    provide() {
      return {
        //      
        kData: this.knowledge
      }
    },
    mounted() {
      this.knowledge.knowledgeId = 2
    }

存在する小さな問題
記事のようにhttps://www.jianshu.com/p/ae0...3つ目は、mountedでprovideのデータを処理すると、サブコンポーネントが親属性knowledgeを取得する場合がある実行順序の問題です.knowledgeIdのデフォルト属性',provideデータ生成の処理ロジックをcreatedに入れるとこの問題の発生を回避できる
余談
knowledgeIdを変更するには、ルーティングからパラメータを取得しますが、ページをリフレッシュするとパラメータが失われます.これは、ルーティングがpath:'detail/:knowledgeId'ではなくpath:'detail'であるためです.前者はthis.$router.push({name:'knowledgeDetail',params:{knowledgeId:knowledgeId})も伝わりますが、リフレッシュするとパラメータが失われます.また、webstormが変更されるとすぐにページが更新されず、手動でhtmlスタイルを削除してIDEに更新するしかありません.いっそこの文章を書いて、他の人の道具を使ってこんなに苦労して、ニマコードを書いた人を道に導く.

    mounted() {
      this.knowledge.knowledgeId = this.$route.params.knowledgeId
    }