vue的provide和inject使用

vue的provide和inject使用(元件傳值)

常用的父子元件通信方式都是父元件綁定要傳遞給子元件的資料，子元件通過

props

屬性接收，一旦元件層級變多時，采用這種方式一級一級傳遞值非常麻煩，而且代碼可讀性不高，不便後期維護。

這對選項需要一起使用，以允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，并在其上下遊關系成立的時間裡始終生效。

provide

和

inject

主要在開發高階插件/元件庫時使用。并不推薦用于普通應用程式代碼中。

1. 父元件

   app.vue

   <template>
       <div id="app">
           <h1>父元件傳值通過provide傳值給子孫元件</h1>
           <hr />
           <FirstChild></FirstChild>
       </div>
   </template>
   
   <script>
   import FirstChild from "./components/FirstChild";
   export default {
       name: "App",
       provide() {
           return {
               name: "chenjiang",
           };
       },
       components: {
           FirstChild,
       },
   };
   </script>
   
   <style>
   </style>
   
              

2. 兒子元件

   FirstChild.vue

   <template>
       <div class="firstChild">
           <h1>兒子元件擷取到的name===>{{ name }}</h1>
           <hr />
           <FirstGrandSon></FirstGrandSon>
       </div>
   </template>
   
   <script>
   import FirstGrandSon from "./FirstGrandSon";
   export default {
       name: "firstChild",
       inject: ["name"],
       /*     inject: {
           name: { default: "good" },
       }, */
       components: {
           FirstGrandSon,
       },
       mounted() {
           console.log(`兒子元件擷取到的name${this.name}`);
       },
   };
   </script>
   
              

3. 孫子元件

   FirstGrandSon.vue

   <template>
       <div class="firstGrandSon">
           <h1>孫子元件擷取到的name===>{{ name }}</h1>
       </div>
   </template>
   
   <script>
   export default {
       name: "firstGrandSon",
       inject: ["name"],
       mounted() {
           console.log(`孫子元件擷取到的name${this.name}`);
       },
   };
   </script>
   
              

4. 運作結果