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

// Parent.vue// Child.vue

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

其實(shí)原因很簡單，因?yàn)樵赩ue中的組件是互相獨(dú)立的，它們之間的數(shù)據(jù)是隔離的，如果我們想要在組件之間共享數(shù)據(jù)，我們應(yīng)該使用Vuex或者通過事件總線來解決。

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

// Parent.vue

// Child.vue

通過事件總線的方式，我們在Parent組件中用eventBus的方式將info變量發(fā)送到了Child組件，Child組件也接收到了這個(gè)值，實(shí)現(xiàn)了跨組件的數(shù)據(jù)傳遞。

在Vue的開發(fā)中，我們應(yīng)該時(shí)刻注意到組件之間的數(shù)據(jù)隔離這個(gè)問題，采用合適的方式來處理組件之間的數(shù)據(jù)交互。