假設有這樣的一種情況，在兩個組件中。一個組件【A】主要是比如說放表格數據，而另外一個組件【B】是專門用來向組件A的表格添加數據的表單。這個時候就是兩個兄弟組件之間傳遞數據了。首先想到的是使用兄弟組件傳遞數據的方法：?

? ? ? ? ? ??

? ?新建一個中間件(eventBus.js)，即一個空的Vue對象。這個對象用來在兄弟組件之間傳遞數據。在B組件中觸發事件，并且暴露數據。而在A組件中去接收B組件暴露的數據,使用如下

? ? ?B:?

?--------------------------------------------------------------

? ? ? import bus from "eventBus.js";

? ? ?....................

? ? ?bus.$emit("formData",this.formData);

--------------------------------------------------------------------------

B組件中的$emit()方法的第一個參數是向外暴露的"鉤子事件"<我暫且這么理解..>。第二個參數就是暴露的數據。

A:

-----------------------------------------------------------------

import bus from "eventBus.js";

............

bus.$on("formData",(res)=>{

?console.log(res);

})

-----------------------------------------------------------------------

這個時候沒有疑問的得到了B傳遞過來的數據。也可以此時賦值給A組件中你自己定義好的data。但是如果和router結合使用的話，變成這種:

???B:?

?--------------------------------------------------------------

? ? ??import bus from "eventBus.js";

? ? ?....................

? ? ?bus.$emit("formData",this.formData);

? ? ?this.$router.push("/a");

--------------------------------------------------------------------------

?

A:

-----------------------------------------------------------------

import bus from "eventBus.js";

............

bus.$on("formData",(res)=>{

?console.log(res);

})

-----------------------------------------------------------------------

這種情況下，在A組件的$on中可以得到res的值，但是無法添加到當前組件的data中。我也感覺到很郁悶。嘗試了很多次修改再修改都沒有效果。只能轉變思路。往router的跳轉上去思考。router除了跳轉到相應的路徑。還可以攜帶params/query。而這個我需要params。于是就有了再次修改AB組件

? B:?

?--------------------------------------------------------------

? ? ??import bus from "eventBus.js";

? ? ?....................

? ? ?bus.$emit("formData",this.formData);

? ? ?this.$router.push({

? ? ? path:"/a",

? ? ? params:{

? ? formData:this.formData

? ? ?}

? ? });

--------------------------------------------------------------------------

?

A:

import? ?bus? from "eventBus.js";

mounted(){

? var params=this.$route.params.formData;

? this.data.push(params);

}?

this.data? 是A組件中的data表格數據， 是一個數組的形式。

問題，看似解決了嗎？？? 點擊添加的時候，form表單中的數據是添加到table當中了。但是有一個很大的問題。無論你添加多少條數據，都只能添加進一條進table。一看mounted中的代碼。當從B轉到A的時候，這個A中的data并不是之前已經添加過一次form表單的data，而是它自身的data數據。每次mounted的時候，data數據都是一樣的。所以只能添加一條進table中。

?

------------------------------------------------------------------------------------------------------

?

最后！這個數據需要全局的。所以得用vuex來管理。在vuex的state中定義好data數據（數組）。

當提交數據的時候，把form表單的數據傳遞到vuex中。

action.js

mutations.js

getters.js

最后在A組件中調用getters中的entryDatas就可以了。

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的vuex 管理vue-router的传值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。