Vue的異步組件，供大家參考，具體內容如下
1、前置要求
建議使用webpack；
Browserify在默認情況下不支持；
2、用法解釋
首先上官網說明：異步組件
雖然說明是沒問題的，但是示例中的寫法怪怪的，不符合一般新手學習者在實際使用中的習慣。
嗯，換句話說，這段代碼告訴你，通過這種方式引入異步組件，然后他漏掉了一些內容，比如說賦值，如何使用之類。
【1】官方示例代碼：
Vue.component('async-webpack-example', function (resolve) { // 這個特殊的 require 語法告訴 webpack // 自動將編譯后的代碼分割成不同的塊， // 這些塊將通過 Ajax 請求自動下載。 require(['./my-async-component'], resolve)})【2】官方示例代碼的實際使用方法：
你如果是一個新手，看上去就懵逼了（比如之前的我，完全不知道這個例子是想干嘛）
假如你寫一個test.vue文件，在<script>標簽里，實際使用方法如下：
//test.vue的部分<script> import Vue from 'vue' //關鍵是以下這部分代碼 //需要將引入的異步組件，賦值給變量searchSearch //然后在下方components對象里，將變量正常添加進去，就可以使用異步組件了 //第一個參數是組件名，第二個是異步引入的方法 const searchSearch = Vue.component('searchSearch', function (resolve) { require(['./service-search.vue'], resolve) }) export default{ data(){ return {} }, methods: {}, components: { searchSearch: searchSearch } }</script>【3】更簡單的異步組件的使用方法
上面代碼還是太麻煩了，要引入Vue實例先，然后引入組件，然后才能使用。
教練，有木有更簡單的？有~
<script> export default{ data(){ return {} }, methods: {}, components: { searchSearch: function (resolve) { //異步組件寫法 require(['./service-search.vue'], resolve) } } }</script>只需要把原有的searchSearch: searchSearch改為一個函數，然后在函數里異步引入就行。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
