Vue異步組件使用詳解
更新時(shí)間：2017年04月08日 11:42:42 作者：qq20004604
這篇文章主要為大家詳細(xì)介紹了Vue異步組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
Vue的異步組件，供大家參考，具體內(nèi)容如下
1、前置要求
建議使用webpack；
Browserify在默認(rèn)情況下不支持；
2、用法解釋
首先上官網(wǎng)說明：異步組件
雖然說明是沒問題的，但是示例中的寫法怪怪的，不符合一般新手學(xué)習(xí)者在實(shí)際使用中的習(xí)慣。
嗯，換句話說，這段代碼告訴你，通過這種方式引入異步組件，然后他漏掉了一些內(nèi)容，比如說賦值，如何使用之類。
【1】官方示例代碼：
Vue.component('async-webpack-example', function (resolve) {
// 這個(gè)特殊的 require 語法告訴 webpack
// 自動(dòng)將編譯后的代碼分割成不同的塊，
// 這些塊將通過 Ajax 請(qǐng)求自動(dòng)下載。
require(['./my-async-component'], resolve)
})
【2】官方示例代碼的實(shí)際使用方法：
你如果是一個(gè)新手，看上去就懵逼了（比如之前的我，完全不知道這個(gè)例子是想干嘛）
假如你寫一個(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】更簡單的異步組件的使用方法
上面代碼還是太麻煩了，要引入Vue實(shí)例先，然后引入組件，然后才能使用。
教練，有木有更簡單的？有~
<script>
export default{
data(){
return {}
},
methods: {},
components: {
searchSearch: function (resolve) {
//異步組件寫法
require(['./service-search.vue'], resolve)
}
}
}
</script>
只需要把原有的searchSearch: searchSearch改為一個(gè)函數(shù)，然后在函數(shù)里異步引入就行。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue5中的事件修飾符(style)和template，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
利用Vue-cli搭建Vue項(xiàng)目框架的教程詳解
這篇文章主要為大家詳細(xì)介紹了利用Vue-cli搭建Vue項(xiàng)目框架的相關(guān)資料，對(duì)大家深入了解Vue有一定的幫助，感興趣的小伙伴可以了解一下2023-02-02
本文主要介紹了為什么vue中不建議使用空字符串作為className，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
element日期選擇器el-date-picker樣式圖文詳解
最近寫的項(xiàng)目里面有一個(gè)功能是日期選擇功能,第一反應(yīng)是使用element里面的el-date-picker組件,下面這篇文章主要給大家介紹了關(guān)于element日期選擇器el-date-picker樣式的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue項(xiàng)目之頁面class不生效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue中響應(yīng)式系統(tǒng)實(shí)現(xiàn)原理圖文講解
Vue的響應(yīng)式實(shí)現(xiàn)是借助Object.defineProperty通過重寫getter和setter方法來進(jìn)行的數(shù)據(jù)劫持，Vue3通過Proxy代理攔截對(duì)象中任意屬性的變化，通過Reflect反射對(duì)源對(duì)象的屬性進(jìn)行操作，然后再在get里收集依賴在set里派發(fā)更新2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue使用過濾器格式化日期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要介紹了Vue條件渲染與列表渲染，條件渲染包括v-if、v-show等內(nèi)容，文章對(duì)條件渲染及列表渲染介紹詳細(xì)，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
element-plus按需引入后ElMessage與ElLoading在頁面中的使用
這篇文章主要介紹了element-plus按需引入后ElMessage與ElLoading在頁面中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn)
這篇文章主要介紹了element-ui中Table表格省市區(qū)合并單元格的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08