依賴注入、遞歸組件的用法

處理邊界狀況

1. $root 用來訪問根組件

2. $parent 用來從一個子組件訪問父組件的實例

3. ref 和 $refs 的用法

   在組件上面使用 ref 這個屬性綁定，屬性值自取，而後就能夠經過 $refs.屬性名 這種方式去獲取到指定組件的實例了。

   其實不只僅是組件可以使用 ref ,標籤元素也能使用。

4. 依賴注入

   如今咱們有一個需求，若是咱們存在多個組件嵌套的，而後如今其中某一個組件想訪問其曾祖父組件的方法，那麼使用上面兩種方式都是不可取的，這個時候官方提供了 provide 和 inject 這兩個屬性來解決這個問題。

   • provide 容許咱們指定想要提供給後代組件的數據/方法，且該屬性是一個方法，返回一個對象，鍵名就是咱們要傳到後代組件的標誌
   • 而後在任何後代組件裏，咱們均可以使用 inject 選項來接收指定的咱們想要添加在這個實例上的屬性。該屬性是一個數組類型，跟 props 的數組語法相似

   說到這裏，有的人可能會以爲這不就是跟 props 差很少嘛。沒錯，它確實差很少，可是仍是有區別的，好比，祖先元素不須要知道哪些後代組件使用它提供的屬性；其次，後代組件也不須要知道被注入的屬性來自哪裏

   代碼以下：

   父組件：

   <div id="app">
     <child-com></child-com>
   </div>
   
   <template id="childCom">
     <div>
       <span>我是子組件</span>
       <grand-com></grand-com>
     </div>
   </template>
   
   <template id="grandCom">
     <div>
       <span>我是孫子組件</span>
       <button @click='btnClick'>孫子組件按鈕</button>
       <h2>{{mess}}</h2>
     </div>
   </template>
   
   <script>
     const vm = new Vue({
       el: '#app',      //  父組件
       methods: {
         sendMessage() {
           return '我發送了信息'
         }
       },
       provide() {  //  注意這裏的 provide屬性
         return {
           sendMess: this.sendMessage()  //  提供給後代了一個方法
         }
       },
       components: {
         childCom: {
           template: '#childCom',   //  子組件
           components: {
             grandCom: {
               template: '#grandCom',   //  孫子組件
               inject: ['sendMess'],    //  注意這裏的 inject屬性
               data() {
                 return {
                   mess: ''
                 }
               },
               methods: {
                 btnClick() {
                   this.mess = this.sendMess //  孫子組件用了這個方法
                 }
               },
             }
           }
         }
       }
     })
   </script>

   效果圖：

5. 遞歸組件

   聽到遞歸組件，顧名思義就是採用的遞歸算法啦。可是組件如何才能遞歸呢？通常什麼地方纔會用到組件遞歸呢？

   首先我來回答第二個問題：想必你瀏覽過那麼多的網頁，總會發現網頁中的那些測邊欄導航欄啥的，這些存在一級二級三級層次關係的，就能夠用遞歸。

   那麼如今我再回答第二個問題，組件怎麼使用遞歸呢？其實很簡單，關鍵步驟就在於組件的 name 屬性了。有不少都不知道爲何組件中在 export defalut 的對象中爲啥會有個 name 屬性，其實 name 屬性在這裏就發揮了很大的做用，下面看代碼：

   <div id="app">
     <child-com :list='list'></child-com>
   </div>
   
   <template id="childCom">
     <div>
       <div v-for="(item, index) in list" :key="index">
         <div class="title">
           <span>{{item.title}}</span>
         </div>
         <!-- 下面就是組件遞歸調用了 -->
         <div v-if="item.children" class="child">
           <child-com :list='item.children'></child-com> <!--若是下面name更名了這裏就根據name的名字來書寫-->
         </div>
       </div>
     </div>
   </template>
   
   <script>
     const vm = new Vue({
       el: '#app',
       data: {
         list: [
           {
             title: '一級標題',
             children: [
               {
                 title: '二級標題',
                 children: [
                   {
                     title: '三級標題'
                   },
                   {
                     title: '三級標題'
                   }
                 ]
               },
               {
                 title: '二級標題'
               },
               {
                 title: '二級標題'
               }
             ]
           },
           {
             title: '一級標題'
           },
           {
             title: '一級標題'
           }
         ]
       },
       components: {
         childCom: {    //  下面這裏爲子組件了
           template: '#childCom',
           props: ['list'],
           name: 'ChildCom' //  注意這裏子組件的name，你也能夠改爲其餘的名字
         }
       }
     })
   </script>

   CSS樣式：

   <style>
     .title {
       width: 150px;
       height: 30px;
     }
     .child {
       width: 140px;
       margin-left: 30px;
     }
   </style>

   效果圖：

   有的人會問爲何要加個 v-if ，其實很簡單，在咱們寫1+100的算法時候，咱們若是用遞歸的方式作的話是否是就必定要有最終結束的條件，也就是數字必須大於等於0，小於0就不遞歸了。這裏也是一樣的道理，當繼續往子組件傳遞list進去是，咱們要先判斷他還有沒有children，若是沒有了咱們就應該讓他中止。

6. 經過v-on建立低開銷的靜態組件

   若是你想渲染的一個組件是一個徹底靜態的，若是使用vue的話會頻繁的建立銷燬，這個時候你會以爲這很影響性能，由於他只是個靜態組件，徹底沒有這個必要，這個時候你能夠在其模板的根元素上(不是template元素)添加一個 v-once 屬性，這樣一來，該組件就會只計算一次結果真後緩存起來，以後使用的都是以前緩存的結果。同時，由於他是隻計算一次的，因此你若是再對其上的數據進行修改的話，數據將不會是響應式的。

   再說一次，試着不要過分使用這個模式。當你須要渲染大量靜態內容時，極少數的狀況下它會給你帶來便利，除非你很是留意渲染變慢了，否則它徹底是沒有必要的——再加上它在後期會帶來不少困惑。例如，設想另外一個開發者並不熟悉 v-once 或漏看了它在模板中，他們可能會花不少個小時去找出模板爲何沒法正確更新。