1.父組件與子組件傳值props

定義父組件，父組件傳遞 number這個數值給子組件，如果傳遞的參數很多，推薦使用json數組{}的形式

定義子組件，子組件通過 props方法獲取父組件傳遞過來的值。props中可以定義能接收的數據類型，如果不符合會報錯。

2.子組件向父組件傳遞數據

子組件通過$emit方法傳遞參數

子組件部分:

3.子組件向子組件傳遞數據

Vue 沒有直接子對子傳參的方法，建議將需要傳遞數據的子組件，都合並為一個組件。如果一定需要子對子傳參，可以先從傳到父組件，再傳到子組件。

為了便於開發，Vue 推出了一個狀態管理工具 Vuex，可以很方便實現組件之間的參數傳遞

4.畫面遷移的組件之間傳遞數據

4.1通過路由帶參數進行傳值，例：兩個組件 A和B,A組件通過query把orderId傳遞給B組件

A組件傳值寫法：

this.$router.push({ path: ‘/conponentsB‘, query: { orderId: 123 } }) // 跳轉到B

B組件取值寫法：

this.$route.query.orderId

4.2通過設置 Session Storage緩存的形式進行傳遞

兩個組件A和B，在A組件中設置緩存orderData

const orderData = { ‘orderId‘: 123, ‘price‘: 88 } 
sessionStorage.setItem(
 
‘緩存名稱‘, JSON.stringify(orderData))

B組件就可以獲取在A中設置的緩存了

const dataB = JSON.parse(sessionStorage.getItem(‘緩存名稱‘))

[Vue]組件之間傳值