關於vue單頁面多個元件巢狀監聽瀏覽器視窗變化問題

2021-09-05 12:03:24 字數 539 閱讀 2562

最近公司有個大屏展示專案(如下圖)

頁面的元素需要做響應式監聽,圖表需要跟著視窗響應變化

每乙個圖表都被我寫成了乙個元件,然後就在每乙個元件裡寫了一串**,監聽瀏覽器變化

結果只有父元件的**生效

mounted()

;}

經簡單測試後發現,同乙個路由頁面只能註冊一次瀏覽器視窗監聽事件,第二次註冊的會覆蓋第一次註冊

下邊**即可測試

mounted()

; window.

onresize=(

)=>

;}

父子巢狀元件同理,子元件生命週期執行在父元件之前,父元件函式會覆蓋子元件函式

1、只在父頁面寫個監聽,但是通過元件傳值的方式傳給子元件,並且子元件用watch監聽傳值的變化,響應改變

2、假如是多層元件巢狀,用vuex可能會更省力

vue單頁面元件工程建立

npm install g cnpm registry 2.安裝vue npm install vue cnpm install vue 3.安裝 vue腳手架 命令列工具 npm install global vue cli cnpm install global vue cli 4.建立專案 注...

vue父子元件通訊,巢狀元件

子傳父 子元件定義事件say click say 子傳父div methods裡面執行say方法,通過emit給父元件傳遞乙個叫sire的自定義事件,它會自動去父元件裡面尋找sire事件 say 父元件引用子元件模板 宣告型別 註冊元件 sire自定義事件必須與子元件給的一致 say event t...

vue 單檔案元件

vue.js自定義的一種檔案格式 vue檔案,稱為單檔案元件,就是將html css js封裝在同乙個檔案內,從而實現了對乙個元件的封裝,乙個.vue 檔案就是乙個單獨的元件。1 編寫單檔案元件 vue結尾的檔案 由3部分組成 html template css style js script ht...