VUE通信コンポーネント、孫レベルのコンポーネントへの祖父母は、成分値が提供用いる注入を渡します

図1に示すように、コードは次のとおりです。

（1）組立祖父母親コード：

<！ - 
  ファイルの説明：先祖レベルのコンポーネント
  ：作成した2019年12月28日15時30 
- > 
< テンプレート> 
  < divのクラス= "" スタイル=「幅：900px;高さ：600PX;背景色：＃d6e7ff ;パディング：20ピクセル; " > 
    < スパンスタイル="フォントサイズ：20ピクセル、フォント重量：太字; " >祖先成分：父</ スパン> 
    < BR > 
    パラメータ孫を渡すレベル成分[G] toGdata。 toGdata} {} { < BR > 
    < INPUTのタイプ= "テキスト" V-モデル= "toGdata.name" > 
    <DIV > 
      < childrenA> </ ChildrenA > 
      < childrenB > </ childrenB > 
      < childrenC > </ childrenC > 
    </ DIV > 
  </ DIV > 
</ テンプレート> 

< スクリプト> 
// ここのような他のファイル（インポートすることができます：コンポーネント、ツールのJS、最初に三方プラグJS、JSONファイル、画像ファイルなど）
// 例えば：インポート「コンポーネント名」「『コンポーネントパス』」から; 
からインポートchildrenA 「./childrenA 」
からインポートchildrenB 「./childrenB 」
childrenCからインポート」。 / childrenC "

輸出デフォルト{ 
  名：' 父' 、
  提供（）{ 
    リターン{ 
      toGdata：この.toGdata 
    } 
  } 
  // 被験体に導入インポートコンポーネントを使用して注入する
  コンポーネント：{ 
    childrenA、
    childrenB、
    childrenC 
  }、
  データ（）{ 
    // ここストアデータ
    リターン{ 
      toGdata：{名：' ジョン・ドウ' } 
    } 
  } 
} 
</ スクリプト>

（2）息子アセンブリステージCコード：

< テンプレート> 
  < divのクラス= "" スタイル= "フロート：左;マージン：10pxの;幅：250ピクセル;高さ：500pxなど;背景色：＃1 eeff85;パディング：20ピクセル;" > 
    < スパンのスタイル=「フォントサイズ：18px;フォント重量：太字;」>儿子级组件C：childrenC </ スパン> 
    < divの> 
      < childrenF > </ childrenF > 
      < childrenG > </ childrenG > 
    </ DIV > 
  </ DIV > 
</ テンプレート>

（3）Gコード孫レベルのコンポーネント。

<!--文件描述：孙子级组件G
  创建时间：2019/12/28 15:37-->
<template>
  <div class="" style="float: left;margin: 10px;width: 200px;height: 200px;background-color: #ff00de;padding: 20px;color:#fff;">
    <span style="font-size: 14px;font-weight: bold;color:#fff;">孙子级组件G：childrenG</span>
    <div style="color:#0009ff;">
      接受来自祖父级组件parent的数据【toGdata】：{{toGdata}}
      <input type="text" v-model="fromParentData.name">
    </div>

  </div>
</template>

<script>
export default {
  name: 'childrenA',
  inject: ['toGdata'],
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      fromParentData: this.toGdata
    }
  }
}
</script>

注意: 这里不论子组件嵌套有多深, 只要调用了 inject 那么就可以注入 provide 中的数据，而不局限于只能从当前父组件的props属性中回去数据

2、传递参数为值类型(基本类型)，接受参数的组件中不能进修改，传递对象或者数组，可以直接进行修改，并且可以影响祖先级组件

（1）toGdata传值改为：String，在孙子级组件G中直接修改则报错：

　　　　在祖父级组件parent中直接修改，没有传递到孙子级组件G：

（2）toGdata传值改为：Object，在孙子级组件G中直接则对应的祖先级组件数据也会受到影响，原因还是堆和栈储存数据的问题：

3、结论：在简单的功能模块，可以通过传递对象实现跨级组件通信，复杂的功能模块不建议使用，因为传递的数据，如果其他的儿子级组件，其他儿子级组件的孙子级组件也在使用的话，会造成数据的混乱，甚至无法理解数据是在哪里变化的，排查故障艰难。跨级组件通信可以定义一个中央事件总线（eventBus），但是更复杂的系统，还是建议使用vuex。

VUE通信コンポーネント、孫レベルのコンポーネントへの祖父母は、成分値が提供用いる注入を渡します

おすすめ