Vue 開發MPA，要如何讓多頁共同使用相同function?

gmlin 2022-04-14 12:27:57 ‧ 917 瀏覽

分享至

假設我有A,B,C各自三頁獨立html+vuejs(Vue3)，其中有一funcA為此三頁都會呼叫的function，應該要怎麼寫比較好？

funcA 是只會回傳字串的function ，並不會去變更或呼收各自的Vue.$data/function

我原本是想把funcA寫到一個component裡，在從A,B,C裡各自去call this.data1=this.$ref.child.funcA(p1,p2) 但不知是否還有其他比較好的寫法?

淺水員 iT邦大師 6 級 ‧ 2022-04-14 13:08:25 檢舉

funcA獨立一個檔案，import 引入應該就可以了吧？

gmlin iT邦新手 5 級 ‧ 2022-04-19 13:49:25 檢舉

但這樣在html裡無法直接使用{{funcA(p1,p2)}}

p1,p2 是vue.$data裡的variable

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

天黑

iT邦研究生 5 級 ‧ 2022-04-14 15:55:15

最佳解答

也許你需要的是這個邦友教學

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

gmlin iT邦新手 5 級 ‧ 2022-04-19 14:08:35 檢舉

好方法...但如果這邊不導入webpack等打包工具，而是純cdn引用vuejs(換句話說，無法使用import/export等語法），還有類似方法嗎

天黑 iT邦研究生 5 級 ‧ 2022-04-19 17:04:04 檢舉

無架構使用，就沒有架構解法了....就只當一般js用...

gmlin iT邦新手 5 級 ‧ 2022-04-19 17:22:38 檢舉

嗯了解謝謝

gmlin iT邦新手 5 級 ‧ 2022-04-19 18:06:10 檢舉

參考這個教學，想了一個方法來模擬

Vue.createApp({
  created(){
     this.funcA=function(p1,p2){
       ....
     }
  }
});

只是我實際實用時，created裡是跑foreach將特定集合的function全部喂給app

登入發表回應

Ami

iT邦新手 4 級 ‧ 2022-04-15 10:59:06

"funcA 是只會回傳字串的function "

如果這個方法不需依賴環境, 那走function program方法應該可以解決

1.將所有依賴跟影響元素抽成參數
2.包成單獨的js
3.最後掛載在全域或者做成npm package

執行！完成！

回應 1
分享
檢舉

gmlin iT邦新手 5 級 ‧ 2022-04-19 14:09:17 檢舉

但這樣在html裡無法直接使用{{funcA(p1,p2)}}

p1,p2 是vue.$data裡的variable

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22182 篇

完賽人數

597 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙