1.父組件與子組件傳值props
1.1定義父組件，父組件傳遞 inputText這個數值給子組件:
//父組件 //引入的add-widget組件 //使用 v-bind 的縮寫語法通常更簡單： <add-widget :msg-val="msg"> //這里必須要用 - 代替駝峰 // HTML 特性是不區分大小寫的。所以，當使用的不是字符串模板，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名，當你使用的是字符串模板的時候，則沒有這些限制 </add-widget> data(){ return { msg: [1,2,3] }; }
1.2定義子組件，子組件通過 props方法獲取父組件傳遞過來的值。props中可以定義能接收的數據類型，如果不符合會報錯。
//子組件通過props來接收數據： //方式1： props: ['msgVal'] //方式2 : props: { msgVal: Array //這樣可以指定傳入的類型，如果類型不對，會警告 } //方式3： props: { msgVal: { type: Array, //指定傳入的類型 //type 也可以是一個自定義構造器函數，使用 instanceof 檢測。 default: [0,0,0] //這樣可以指定默認的值 } } //注意 props 會在組件實例創建之前進行校驗，所以在 default 或 validator 函數里，諸如 data、computed 或 methods 等實例屬性還無法使用
注意：父子組件傳值，數據是異步請求，有可能數據渲染時報錯
- 原因：異步請求時，數據還沒有獲取到但是此時已經渲染節點了
- 解決方案：可以在父組件需要傳遞數據的節點加上 v-if = isReady(isReady默認為false），異步請求獲取數據后（isReady賦值為true），v-if = isReady
2.子組件向父組件傳遞數據
子組件通過$emit方法（用來觸發事件,詳情見官網）傳遞參數：
子組件：
父組件：
為了方便起見，我們為這種模式提供一個縮寫，即 .sync 修飾符，如
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document>
使用.sync修飾符：
<text-document v-bind:title.sync="doc.title"></text-document>
詳情見api：https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修飾符
3.子組件向子組件傳遞數據
Vue 沒有直接子對子傳參的方法，建議將需要傳遞數據的子組件，都合並為一個組件。如果一定需要子對子傳參，可以先從傳到父組件，再傳到子組件。
或者通過eventBus或vuex（小項目少頁面用eventBus，大項目多頁面使用 vuex）傳值：
3.1通過eventBus(即通過on監聽、emit觸發的方式)
3.1.1定義一個新的vue實例專門用於傳遞數據，並導出
3.1.2定義傳遞的方法名和傳輸內容，點擊事件或鈎子函數觸發eventBus.emit事件
3.1.3接收傳遞過來的數據
注意：enentBus是一個另一個新的Vue實例，區分兩個this所代表得vue實例
3.2vuex進行傳值
詳情見：https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc
4.畫面遷移的組件之間傳遞數據
4.1通過路由帶參數進行傳值，例：兩個組件 A和B,A組件通過query把orderId傳遞給B組件
A組件傳值寫法：
this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳轉到B
B組件取值寫法：
this.$route.query.orderId
注意：
- Vue-詳解設置路由導航的兩種方法：聲明式的導航 <router-link :to="..."> 和編程式的導航router.push(...)
- 其中畫面遷移有push和replace兩種方式，詳情如：https://www.cnblogs.com/vickylinj/p/10880869.html
- 傳參的方式又分為查詢參數query（+path）和命名路由params(+name)兩種方式:
- 命名路由搭配params，刷新頁面參數會丟失
- 查詢參數搭配query，刷新頁面數據不會丟失
- 接受參數使用this.$router后面就是搭配路由的名稱就能獲取到參數的值
詳情如：https://blog.csdn.net/crazywoniu/article/details/80942642
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('緩存名稱'))
5.通過provide/inject傳值
詳情見：https://www.cnblogs.com/vickylinj/p/13368745.html
6.通過$attrs、$listeners傳值
詳情見：https://www.cnblogs.com/vickylinj/p/13376391.html