iT邦幫忙

0

Vue3+Vue Router如何在Composables中互相傳值?

vue3 vue-router vite
adha9990 2022-03-02 10:42:18 ‧ 1408 瀏覽

  • 分享至 

  • xImage

我想要弄一個步驟式的頁面由一個父元件下面四個子元件組成
現在卡在子元件間無法互相傳值

我在景點推薦選擇值
https://ithelp.ithome.com.tw/upload/images/20220302/20122444yE0fet7gEM.png

在路線規劃應該要收到值
https://ithelp.ithome.com.tw/upload/images/20220302/20122444aXrDUyEDwF.png

結果發現換個元件值就會被清空
https://ithelp.ithome.com.tw/upload/images/20220302/20122444ZKiC6EcKd1.png

路徑管理 router.js
https://ithelp.ithome.com.tw/upload/images/20220302/20122444SLIL5ueKeK.png

父元件 Tour.vue
https://ithelp.ithome.com.tw/upload/images/20220302/201224441BskFdrsim.png

子元件 景點推薦 AttractionSelection.vue
https://ithelp.ithome.com.tw/upload/images/20220302/20122444nHI2OANYfa.png

子元件 路線規劃 RoutePlanning.vue
https://ithelp.ithome.com.tw/upload/images/20220302/20122444hfzWeoGzJx.png

Composables 裡面放應該互相傳遞的值 tour.js
https://ithelp.ithome.com.tw/upload/images/20220302/201224446l7f4rMtbA.png

想請教該如何解決?

登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
listennn08
iT邦高手 5 級 ‧ 2022-03-02 10:47:08
最佳解答

每到一個子組件 useTour 就重新初始化，會被清空應該滿正常的
useTour 應該放在父組件然後使用 Provide / Inject 統一從父組件取得資料

adha9990 iT邦新手 5 級 ‧ 2022-03-02 11:30:32 檢舉

可以了感謝!不然我原本想說要用Props去硬碰硬

登入發表回應
2
greenriver
iT邦研究生 5 級 ‧ 2022-03-02 11:09:54

使用Vuex，能讓問題簡單化
/images/emoticon/emoticon01.gif

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙