vue 改變父子元件mounted執行順序

2021-10-24 16:21:50 字數 1023 閱讀 6841

最近在用vue做cesium地圖相關的東西,有乙個需求是這樣,乙個地圖為底圖,然後有乙個選單切換不同的業務場景(業務場景都是在地圖上做操作,打點,顯示一些懸浮框什麼的。。。)

原來的**是每一次切換都重新初始化一遍地圖,比較耗效能(需要請求大量的地圖資源)。於是我想重構以下**,簡單思路就是只初始化一遍地圖,業務頁當成地圖的子元件或者子路由,但是問題就是業務元件(子元件)需要等地圖元件(父元件)mounted(初始化地圖,畫地圖需要dom元素)結束之後才能進行mounted(在地圖上打點什麼的)。

說人話就是如何在父元件mounted結束後再進行子元件mounted

父元件先進行建立,在掛在前子元件進行建立+掛載,子元件掛載完成後父元件掛載。

父元件:beforecreate

父元件:created

父元件:beforemount

子元件:beforecreate

子元件:createc

子元件:beforemount

子元件:mounted

父元件:mounted

可以看出是先子元件mounted之後父元件mounted,如何實現父元件mounted之後子元件mounted呢?

思路:通過列印this發現,有乙個_ismounted屬性,表示當前例項是否掛載完畢(true 掛載完成,false 沒有掛載完成),在父元件掛在前將_ismounted存在window中,掛載後更新_ismounted。在子元件mounted新增定時器,根據_ismounted判斷是否執行初始化方法。

// 父元件

beforemount()

,mounted()

,

// 子元件

mounted()

},500)

}

VUE父子元件

父頁面 actiondetail msg 子頁面呼叫父頁面的方法 this.emit parentaction 我想說的話 我是父元件 我是子元件 父元件對我說 父元件通過 prop 給子元件下發資料,子元件通過 emit觸發事件給父元件傳送訊息 1.this.children用來訪問子元件例項,要...

vue中父子元件先後渲染 vue父子元件傳值

先來說下父傳子吧,需要先在父元件中引用子元件 這種寫法是vue文件規定的,建議這樣寫,不清楚的可以看下文件。然後在子元件中用props物件接收一下中的msg,在把msg渲染到子元件中,這樣就完成了乙個簡單的父傳子 再說一下子傳父 在子元件中寫乙個方法passmsg 然後呼叫this.emit 第乙個...

Vue父子元件通訊

1.父與子通訊,通過屬性傳遞值,如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...