Vue 動態載入元件

2022-02-04 00:42:55 字數 649 閱讀 3695

為什麼要動態載入呢?而不是一次性載入呢?

一次性?你能保證你拿的內容不多,那從效能方面說還是ok的。否則,就該什麼時候用,就什麼時候取。

得出這想法,源於前幾天上班趕產品的故事:

a元件是父親,b元件是a元件的孩子。剛剛,我在a元件裡直接載入b元件。 編譯居然用了將近一分半鐘,我都還沒加其他c孩子,d孩子呢。

現在,我在a元件裡動態載入b元件,也就是點選工作配置單才載入b元件,居然十秒

左右,驚呆了。

下面看看動態載入的方法:

a元件的 template標籤:由於我的動態載入的元件不唯一,所以弄了個變數。中途改名,我就可以載入別的元件了。這裡v-if為false說明,不編譯,等到true才開始區域性編譯該元件。

a元件的 script data :給個預設值,說明不改組件名,那就加這個元件。這裡元件名字跟下面元件註冊是對應的。

動態載入元件的註冊方式:

components:
當然動態載入方法還有好幾種。

vue元件(全域性,區域性,動態載入元件)

vue元件有兩種,一種是全域性元件,一種是區域性元件。整個專案經常用到的用全域性寫法,用到比較少的專供特定頁面用的使用區域性元件。one 全域性元件引入寫法 在專案的main.js中 第一種,在main.js直接寫template 模版字串 vue.component tab home vue.co...

Vue 動態元件

vue.js提供了乙個特殊的元素用來動態掛載不同的元件,使用is特性來選擇要掛載的元件 is current component click change a 切換到a元件button click change b 切換到b元件button click change c 切換到c元件button d...

vue 動態元件

看例子 one component div js 部分 newvue two thr 上面 註冊了三個元件,在 component 標籤裡有個屬性 is,is one,所以頁面會渲染名字叫 one 的元件,顯示結果如下 我是線路一 如果給 is 屬性繫結動態值,那麼就可以實現元件的動態切換,例子如下...