vue 開發(fā)中組件通信可謂是非常常見的操作的，而組件通信最常用的肯定是 props，但是props 使用于父子組件通信還比較方便，但是組件層級較多就時，props 操作起來就顯得十分繁瑣，也不便于書寫；
注：為了方便，我就直接把 inject 放在子組件中

provide/inject 基本格式

1. 父組件中 provide 格式

     <template>
       <div>
         {{a}}
         <test />
       </div>
     </template>
     <script>
     import test from './compoent/test.vue'
     export default {
       components: { test },
       name: 'showExcel',
         data () {
           return {
             // 定義一個對象，這里有一個小技巧，后面會講到
             a: { b: 123 },
           }
         },
         provide () {
           return { a: this.a }
         },
     }
     </script>
   

2. 子組件或?qū)O子組件中 inject 基本格式

     <template>
       <div @click="changeA">{{a}}</div>
     </template>
   
     <script>
     export default {
       name: 'test',
       inject: ['a']
     }
     </script>
   

3. 此時效果圖：
   效果圖1

provide/inject inject 接收不到 provide 實時數(shù)據(jù)情況

1. 真實開發(fā)中數(shù)據(jù)往往會從后端獲取，此時直接在 provide 中聲明該值后就會發(fā)現(xiàn)在孫子組件中是獲取不到實時更新的值的，此時就需要借助方法來獲??；

     // 父組件
     provide () {
       return { a: this.a, getA: this.getA }
     },
     mounted () {
       setTimeout(() => {
         this.a.b = '77';
       }, 2000);
     },
     methods: {
       getA () { return this.a }
     }
   
     // 子組件
     inject: ['a', 'getA'],
     mounted () {
       this.$nextTick(() => {
         console.log(this.getA()); // {b:123,c:77}
       }, 2000);
     },
   

2. 這里使用 setTimeout 來模擬網(wǎng)絡(luò)請求，在改變父組件 cc 的值后，子組件中接收到的 cc 的依然是最初我們賦予的初始值 123456，并沒有改變；但是 通過方法 getCC
   返回的值是我們請求到的最新值，并且在視圖中也是同樣的效果；

     // 父組件
     data () {
       return {
         // 定義一個對象，這里有一個小技巧，后面會講到
         a: { b: 123 },
         cc: 123456,
       }
     },
     provide () {
       return { a: this.a, cc: this.cc, getCC: this.getCC }
     },
     mounted () {
       setTimeout(() => {
         this.cc = '456'
       }, 2000);
     },
     methods: {
       getCC () { return this.cc },
     }
   
     // 子組件
     inject: ['getCC', 'cc'],
     mounted () {
       setTimeout(() => {
         console.log('cc', this.cc); // cc 123456
         console.log('getCC', this.getCC()); // getCC 456
       }, 3000);
     },
   

3. 效果圖
   效果圖
4. 我們再在 父組件的 getCC 方法中增加一個輔助參數(shù)看看打印效果

     // 父組件
     <template>
       <div>
         父組件中 cc:{{cc}}== getCC:{{getCC()}}
         <test />
       </div>
     </template>
     <script>
     import test from './compoent/test.vue'
     export default {
       components: { test },
       name: 'showExcel',
       data () {
         return {
           // 定義一個對象，這里有一個小技巧，后面會講到
           a: { b: 123 },
           cc: 123456,
         }
       },
       provide () {
         return { cc: this.cc, getCC: this.getCC }
       },
       mounted () {
         setTimeout(() => {
           this.cc = '456'
         }, 2000);
       },
       methods: {
         getCC (a) { console.log('99999', a); return this.cc },
       }
     }
     </script>
   
     // 子組件
     <template>
       <div>
         子組件中 cc:{{cc}}== getCC:{{getCC('888')}}
       </div>
     </template>
   
     <script>
     export default {
       name: 'test',
       inject: [ 'getCC', 'cc'],
       mounted () {
         setTimeout(() => {
           console.log('cc', this.cc); // cc 123456
           console.log('getCC', this.getCC('000')); // getCC 456
         }, 3000);
       },
     </script>
   

5. 我們再來看看控制臺打印效果
   控制臺效果圖
6. 從控制臺效果圖可以看出，父組件和子組件視圖模板中 getCC 方法各自執(zhí)行了兩次，因為初始渲染視圖時執(zhí)行一次，在更新 cc 時又各自執(zhí)行了一次，所以視圖中的數(shù)據(jù)會有變化；
   vue 中父子組件通信 js 引用的作用