目錄

方法一：通過路由帶引數進行傳值

方法二：通過設定 Session Storage/local Storage快取的形式進行傳遞

1、 原生用法使用

2、 對Session Storage/local Storage快取進行統一封裝

方法三：父子元件之間的傳值(通過props屬性)

1、父元件給子元件傳值

2、子元件給父元件傳值(通過emit事件)

方法四：不同元件之間傳值，通過eventBus

方法五：vuex進行傳值

參考

方法一：通過路由帶引數進行傳值

需求：兩個頁面A,B，頁面A傳遞引數值phase給頁面B.

做法：

1）頁面A附加引數：//更新位址列裡面的資訊哦

router.push({path: "/iteration/track", query: {...this.$route.query, phase: this.phase}})

PS: this.$router.push({ path: '/iteration/track', query: {...this.$route.query, phase: this.phase} }) // 跳轉到B

2） 頁面B獲取位址列中的引數；

this.$route.query.project_id

方法二：通過設定 Session Storage/local Storage快取的形式進行傳遞

想了解更多有關sessionStorage/localStorage,請移步：

https://blog.csdn.net/huazhongkejidaxuezpp/article/details/50283081

https://blog.csdn.net/huazhongkejidaxuezpp/article/details/84308916

1、 原生用法使用

window.localStorage['aaa']='一個例子啊'

console.log(window.localStorage.getItem('aaa'))

window.localStorage.setItem('test1',[1,2,3,4,5,6])

window.localStorage.setItem('test2',{userId:'iiiiii',token:7788777})

window.localStorage.setItem('test3','dfdfdf')

console.log(window.localStorage.getItem('test1'))

console.log(window.localStorage.getItem('test2'))

console.log(window.localStorage.getItem('test3'))



window.sessionStorage.setItem('test1',[1,2,3,4,5,6])

window.sessionStorage.setItem('test2',{userId:'iiiiii',token:7788777})

window.sessionStorage.setItem('test3','dfdfdf')

console.log(window.sessionStorage.getItem('test1'))

console.log(window.sessionStorage.getItem('test2'))

console.log(window.sessionStorage.getItem('test3'))
 

缺點：

1）到處直接使用localstorage['aaa']='xxx'這些原生語法實現，這樣耦合度太高了，假如有一天需要換實現方式，或者對儲存大小做一些控制，那麼需要修改的程式碼就會很多

2)起的key的名字難免會重複，而且這樣也會造成全域性汙染

3) 因為localstorage的使用不規範，所以造成了儲存空間的浪費和不夠用

解決：

封裝storage的使用方法，統一處理

規範storage的key值的命名規則

規範storage的使用規範

2、 對Session Storage/local Storage快取進行統一封裝

import localstorage from '@src/util/localstorage';

import sessionstorage from '@src/util/sessionstorage';

import storage from '@src/util/storage';



storage.storage('l','djjdjjd','jwejjwjejw',1);

storage.storage('s','djjdjjd','jwejjwjejw',1);

let a = storage.storage('l','djjdjjd',undefined,null);

console.log(a)

例如：頁面A,B

頁面A中設定：storage.set('s','djjdjjd','jwejjwjejw',1);

頁面B中獲取：storage.get('s')

ps:Session Storage（程式退出銷燬） 和 Local Storage（長期儲存）

localStorage存數的資料是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的資料,儲存空間5M

方法三：父子元件之間的傳值(通過props屬性)

1、父元件給子元件傳值

父元件核心程式碼：

ps: SubmitTest 為子元件名稱

<SubmitTest :iteration_id='this.iteration_id'/>

子元件核心程式碼：

props: {
        iteration_id: {
            type: String
        }

2、子元件給父元件傳值(通過emit事件)

具體參考：https://www.cnblogs.com/LoveAndPeace/p/7273648.html

方法四：不同元件之間傳值，通過eventBus

場景：小專案，頁面量較少的情況下使用

使用前可以在全域性定義一個eventBus


window.eventBus = new Vue();
　　在需要傳遞引數的元件中，定義一個emit傳送需要傳遞的值，鍵名可以自己定義（可以為物件）


eventBus.$emit('eventBusName', id);
　　在需要接受引數的元件重，用on接受該值（或物件）


//val即為傳遞過來的值<br>eventBus.$on('eventBusName', function(val) {<br> 　　console.log(val)<br>})
　　最後記住要在beforeDestroy()中關閉這個eventBus

eventBus.$off('eventBusName');

方法五：vuex進行傳值

場景：vuex主要是是做資料互動，適用於大專案，頁面量較多的業務

解決難題：父子元件傳值可以很容易辦到，但是兄弟元件間傳值（兄弟元件下又有父子元件），或者大型spa單頁面框架專案，頁面多並且一層巢狀一層的傳值，異常麻煩，用vuex來維護共有的狀態或資料會顯得得心應手

例子： 兩個元件A和B，vuex維護的公共資料是地理位置，現在A和B頁面顯示的是相同的地理位置。 需求想實現：如果A修改了地理位置，則B頁面的顯示隨之修改，反之B修改同理。這就是vuex維護公共狀態或資料的魅力，在一個地方修改了資料，在這個專案的其他頁面都會變成這個資料。

vuex瞭解：

https://vuex.vuejs.org/zh/

參考

https://blog.csdn.net/qq_35430000/article/details/79291287

https://www.cnblogs.com/ygtq-island/p/6728137.html

https://www.cnblogs.com/LoveAndPeace/p/7273648.html