Vue異步組件使用詳解
Vue的異步組件，供大家參考，具體內(nèi)容如下
1、前置要求
建議使用webpack；
Browserify在默認(rèn)情況下不支持；
2、用法解釋
首先上官網(wǎng)說(shuō)明：異步組件
雖然說(shuō)明是沒(méi)問(wèn)題的，但是示例中的寫(xiě)法怪怪的，不符合一般新手學(xué)習(xí)者在實(shí)際使用中的習(xí)慣。
嗯，換句話說(shuō)，這段代碼告訴你，通過(guò)這種方式引入異步組件，然后他漏掉了一些內(nèi)容，比如說(shuō)賦值，如何使用之類。
【1】官方示例代碼：
Vue.component('async-webpack-example', function (resolve) {
// 這個(gè)特殊的 require 語(yǔ)法告訴 webpack
// 自動(dòng)將編譯后的代碼分割成不同的塊，
// 這些塊將通過(guò) Ajax 請(qǐng)求自動(dòng)下載。
require(['./my-async-component'], resolve)
})
【2】官方示例代碼的實(shí)際使用方法：
你如果是一個(gè)新手，看上去就懵逼了（比如之前的我，完全不知道這個(gè)例子是想干嘛）
假如你寫(xiě)一個(gè)test.vue文件，在<script>標(biāo)簽里，實(shí)際使用方法如下：
//test.vue的部分
<script>
import Vue from 'vue'
//關(guān)鍵是以下這部分代碼
//需要將引入的異步組件，賦值給變量searchSearch
//然后在下方components對(duì)象里，將變量正常添加進(jìn)去，就可以使用異步組件了
//第一個(gè)參數(shù)是組件名，第二個(gè)是異步引入的方法
const searchSearch = Vue.component('searchSearch', function (resolve) {
require(['./service-search.vue'], resolve)
})
export default{
data(){
return {}
},
methods: {},
components: {
searchSearch: searchSearch
}
}
</script>
【3】更簡(jiǎn)單的異步組件的使用方法
上面代碼還是太麻煩了，要引入Vue實(shí)例先，然后引入組件，然后才能使用。
教練，有木有更簡(jiǎn)單的？有~
<script>
export default{
data(){
return {}
},
methods: {},
components: {
searchSearch: function (resolve) {
//異步組件寫(xiě)法
require(['./service-search.vue'], resolve)
}
}
}
</script>
只需要把原有的searchSearch: searchSearch改為一個(gè)函數(shù)，然后在函數(shù)里異步引入就行。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)動(dòng)態(tài)給id賦值,點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊的元素的id操作
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)給id賦值,點(diǎn)擊事件獲取當(dāng)前點(diǎn)擊的元素的id操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
本文主要介紹了vue-json-editor json編輯器的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue表格顯示字符串過(guò)長(zhǎng)的問(wèn)題及解決
這篇文章主要介紹了vue表格顯示字符串過(guò)長(zhǎng)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
有時(shí)候不希望已經(jīng)請(qǐng)求過(guò)的數(shù)據(jù),再次請(qǐng)求重復(fù)執(zhí)行刷新操作,我們就需要使用數(shù)據(jù)緩存,這篇文章主要給大家介紹了關(guān)于如何巧用Vue緩存函數(shù)的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue3中WatchEffect高級(jí)偵聽(tīng)器的實(shí)現(xiàn)
本文主要介紹了vue3中WatchEffect高級(jí)偵聽(tīng)器的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
vue點(diǎn)擊單張圖片放大實(shí)現(xiàn)步驟(純js)
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊單張圖片放大實(shí)現(xiàn)的相關(guān)資料,在vue項(xiàng)目中實(shí)現(xiàn)點(diǎn)擊圖片放大功能相信對(duì)大家來(lái)說(shuō)都不陌生,文中給出了詳細(xì)的js示例代碼,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了詳解Weex基于Vue2.0開(kāi)發(fā)模板搭建,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章主要向大家分享的是Vue?中插槽的使用總結(jié)，包括內(nèi)容有默認(rèn)插槽、具名插槽、作用域插槽等內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04
使用vue-router完成簡(jiǎn)單導(dǎo)航功能【推薦】
vue-router是Vue.js官方提供的一套專用的路由工具庫(kù)。這篇文章主要介紹了使用vue-router完成簡(jiǎn)單導(dǎo)航功能,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue中mapMutations傳遞參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04