最近在使用Vue的開發中遇到一個問題。寫Vue的時候我們會用到變量來保存數據，并且在html中使用{{}}語法來輸出這個變量的值，但是在一個組件中，如果想要跳轉到另一個組件的時候，我們會通過一些方式來傳遞值給這個組件，比如通過路由，但是發現這個變量無法傳遞，導致另一個組件無法獲取到這個變量的值。這是怎么回事呢？

// Parent.vue// Child.vue

在上述代碼中，我們在Parent組件中用router-link的方式跳轉到了Child組件，通過props來接收info變量的值，但是最終在Child組件中輸出的變量卻是undefined。這是為什么呢？

其實原因很簡單，因為在Vue中的組件是互相獨立的，它們之間的數據是隔離的，如果我們想要在組件之間共享數據，我們應該使用Vuex或者通過事件總線來解決。

// eventBus.js
import Vue from 'vue'
export const eventBus = new Vue()

// Parent.vue

// Child.vue

通過事件總線的方式，我們在Parent組件中用eventBus的方式將info變量發送到了Child組件，Child組件也接收到了這個值，實現了跨組件的數據傳遞。

在Vue的開發中，我們應該時刻注意到組件之間的數據隔離這個問題，采用合適的方式來處理組件之間的數據交互。