我在獲取一個兄弟組件的子組件的時候遇到一個問題
組件的層級關系如下： 我是要從header組件中調用table組件中的一個方法
index.vue
header.vue
footer.vue
table.vue
從header開始：
this.$parent.$refs.footer.$refs.table.function()
這時候報錯 function is not defined 這個function 代表函數名
剛開始以為是層級太多獲取不到，不知道會不會有這個問題，但是我這里應該不是這個問題。
因為我這里的table組件是用 v-if 來切換展示的，所以會因為樣式渲染了但是數據沒過來，導致方法或者變量是undefined
最后解決辦法是v-if換成 v-show，不過if show 的區別還是要搞清楚，以免出現其他位置的錯誤。
if和show的區別：
v-show和v-if都是用來顯示隱藏元素，v-if還有一個v-else配合使用，兩者達到的效果都一樣，性能方面去有很大的區別。
v-show
v-show不管條件是真還是假，第一次渲染的時候都會編譯出來，也就是標簽都會添加到DOM中。之后切換的時候，通過display: none;樣式來顯示隱藏元素。
可以說只是改變css的樣式，幾乎不會影響什么性能。
v-if
在首次渲染的時候，如果條件為假，什么也不操作，頁面當作沒有這些元素。當條件為真的時候，開始局部編譯，動態的向DOM元素里面添加元素。
當條件從真變為假的時候，開始局部編譯，卸載這些元素，也就是刪除。性能方面
v-if絕對是更消耗性能的，因為v-if在顯示隱藏過程中有DOM的添加和刪除，v-show就簡單多了，只是操作css。
使用場景
因為v-show無論如何都會渲染，如果在一些場景下很難出現，那么使用v-if。如果是一些固定的，條件內容都不怎么會改變的，頻繁切換的，使用v-show會比較省性能。
如果是子組件，每次切換子組件不執行生命周期，使用v-show，如果子組件需要重新執行生命周期，那么使用v-if才能觸發。