處理邊界情況
-
$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 > <span>{{item.title}}</span> </div> <!-- 下面就是組件遞回呼叫了 --> <div v-if="item.children" > <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或漏看了它在模板中，他們可能會花很多個小時去找出模板為什么無法正確更新，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/17837.html
標籤：其他