provide & inject 跨組件傳值

provide & inject

作用：可實現跨組件傳值，數據的流只能是向下傳遞
​
provide : 必須在分級組件（不一定是app.vue）進行使用，用來給后代組件注入依賴（屬性或方法）
​
inject : 必須在子組件進行使用，用來獲取根組件定義的跨組件傳遞的數據

應用方法：

1. 根組件定義：

   <template>
     <div id="app">
       <h1>appVue父組件</h1>
       <Child9/>
     </div>
   </template>
   ​
   <script>
   import Child9 from './components/child9'
   export default {
     components:{
       Child9,
    },
     /*
    provide(){   //provide作為一個方法使用 ( 推薦使用 )。
      return{
        'userName' : 'bruce',
      }
    },
    */
     provide : {  //provide也可以作為一個對象進行使用.
       "userName" : 'bruce',
    }
   }
   </script>

2. 子組件接收：

   <template>
       <div class="box">
           <h2>組件10</h2>
           <h3>接受到根組件的傳遞的數據{{userName}}</h3>   <!-- 使用根組件傳遞過來的數據 -->
       </div>
   </template>
   <script>
   export default {
      // inject : ['userName']     //inject后面用一個數組接收
      inject : {                   //inject后面可以是一個對象
           userName : {
               default : '默認值'  //指定默認值
          }
      }
   }
   </script>

3.