Vuejs(15) Vue的非同步元件

2021-08-01 13:03:16 字數 1221 閱讀 4849

建議使用webpack;

browserify在預設情況下不支援;

首先上官網說明:

非同步元件

雖然說明是沒問題的,但是示例中的寫法怪怪的,不符合一般新手學習者在實際使用中的習慣。

嗯,換句話說,這段**告訴你,通過這種方式引入非同步元件,然後他漏掉了一些內容,比如說賦值,如何使用之類。

官方示例**:

vue.component('async-webpack-example'

, function

(resolve)

)

官方示例**的實際使用方法:

你如果是乙個新手,看上去就懵逼了(比如之前的我,完全不知道這個例子是想幹嘛)

假如你寫乙個test.vue檔案,在標籤裡,實際使用方法如下:

的部分

<

script

>

import vue from

'vue'

//關鍵是以下這部分**

//需要將引入的非同步元件,賦值給變數searchsearch

//然後在下方components物件裡,將變數正常新增進去,就可以使用非同步元件了

//第乙個引數是元件名,第二個是非同步引入的方法

const

searchsearch = vue.component(

'searchsearch'

, function

(resolve)

) export

default

},methods: {},

components:

}script

>

更簡單的非同步元件的使用方法

上面**還是太麻煩了,要引入vue例項先,然後引入元件,然後才能使用。

教練,有木有更簡單的?有~

<

script

>

export

default

},methods: {},

components: }}

script

>

只需要把原有的searchsearch: searchsearch改為乙個函式,然後在函式裡非同步引入就行。

出處

vue非同步元件

vue開發過程中,我們會做出特別多特別多的元件,包括login,header,footer,main等等。這樣使整個 看起來就十分的龐大,當我們在開啟網頁的時候,突然一下子把這些所有的元件載入上來,這麼多的請求全部同時開始請求,勢必會造成網頁開啟很慢,使客戶得到的是非常差勁的體驗。因此,vue為我們...

Vue的非同步元件

建議使用webpack browserify在預設情況下不支援 首先上官網說明 非同步元件 雖然說明是沒問題的,但是示例中的寫法怪怪的,不符合一般新手學習者在實際使用中的習慣。嗯,換句話說,這段 告訴你,通過這種方式引入非同步元件,然後他漏掉了一些內容,比如說賦值,如何使用之類。官方示例 vue.c...

vue動態元件 非同步元件

重新建立動態元件的行為通常是非常有用的,但是在這個案例中,我們更希望那些標籤的元件例項能夠被在它們第一次被建立的時候快取下來。為了解決這個問題,我們可以用乙個元素將其動態元件包裹起來。v bind is currenttabcomponent component keep alive 注意 這個要求...