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) { // 這個特殊的 require 語法告訴 webpack // 自動將編譯后的代碼分割成不同的塊， // 這些塊將通過 Ajax 請求自動下載。 require(['./my-async-component'], resolve)})【2】官方示例代碼的實(shí)際使用方法：
你如果是一個新手，看上去就懵逼了（比如之前的我，完全不知道這個例子是想干嘛）
假如你寫一個test.vue文件，在<script>標(biāo)簽里，實(shí)際使用方法如下：
//test.vue的部分<script> import Vue from 'vue' //關(guān)鍵是以下這部分代碼 //需要將引入的異步組件，賦值給變量searchSearch //然后在下方components對象里，將變量正常添加進(jìn)去，就可以使用異步組件了 //第一個參數(shù)是組件名，第二個是異步引入的方法 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改為一個函數(shù)，然后在函數(shù)里異步引入就行。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
