處理邊界情況 1. 用來訪問根組件 2. 用來從一個子組件訪問父組件的實例 3. 和 的用法 在組件上面使用 這個屬性綁定，屬性值自取，然後就可以通過 這種方式去獲取到指定組件的實例了。 其實不僅僅是組件能夠使用 ,標簽元素也能使用。 4. 依賴註入 現在我們有一個需求，如果我們存在多個組件嵌套的， ...
處理邊界情況
$root用來訪問根組件$parent用來從一個子組件訪問父組件的實例ref和$refs的用法在組件上面使用
ref這個屬性綁定，屬性值自取，然後就可以通過$refs.屬性名這種方式去獲取到指定組件的實例了。其實不僅僅是組件能夠使用
ref,標簽元素也能使用。依賴註入
現在我們有一個需求，如果我們存在多個組件嵌套的，然後現在其中某一個組件想訪問其曾祖父組件的方法，那麼使用上面兩種方式都是不可取的，這個時候官方提供了
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>效果圖：
遞歸組件
聽到遞歸組件，顧名思義就是採用的遞歸演算法啦。但是組件如何才能遞歸呢？一般什麼地方纔會用到組件遞歸呢？
首先我來回答第二個問題：想必你瀏覽過那麼多的網頁，總會發現網頁中的那些測邊欄導航欄啥的，這些存在一級二級三級層次關係的，就可以用遞歸。
那麼現在我再回答第二個問題，組件怎麼使用遞歸呢？其實很簡單，關鍵步驟就在於組件的
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，如果沒有了我們就應該讓他停止。通過v-on創建低開銷的靜態組件
如果你想渲染的一個組件是一個完全靜態的，如果使用vue的話會頻繁的創建銷毀，這個時候你會覺得這很影響性能，因為他只是個靜態組件，完全沒有這個必要，這個時候你可以在其模板的根元素上(不是template元素)添加一個
v-once屬性，這樣一來，該組件就會只計算一次結果然後緩存起來，之後使用的都是之前緩存的結果。同時，因為他是只計算一次的，所以你如果再對其上的數據進行修改的話，數據將不會是響應式的。再說一次，試著不要過度使用這個模式。當你需要渲染大量靜態內容時，極少數的情況下它會給你帶來便利，除非你非常留意渲染變慢了，不然它完全是沒有必要的——再加上它在後期會帶來很多困惑。例如，設想另一個開發者並不熟悉
v-once或漏看了它在模板中，他們可能會花很多個小時去找出模板為什麼無法正確更新。
