Vue異步組件使用詳解

更新時(shí)間：2017年04月08日 11:42:42 作者：qq20004604

這篇文章主要為大家詳細(xì)介紹了Vue異步組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Vue的異步組件，供大家參考，具體內(nèi)容如下

1、前置要求

建議使用webpack；

Browserify在默認(rèn)情況下不支持；

2、用法解釋

首先上官網(wǎng)說(shuō)明：異步組件

雖然說(shuō)明是沒(méi)問(wèn)題的，但是示例中的寫法怪怪的，不符合一般新手學(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è)例子是想干嘛）

假如你寫一個(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) {
        //異步組件寫法
        require(['./service-search.vue'], resolve)
      }
    }
  }
</script>

只需要把原有的searchSearch: searchSearch改為一個(gè)函數(shù)，然后在函數(shù)里異步引入就行。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue
組件

相關(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編輯器的使用
本文主要介紹了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
如何巧用Vue緩存函數(shù)淺析
有時(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í)偵聽器的實(shí)現(xiàn)
本文主要介紹了vue3中WatchEffect高級(jí)偵聽器的實(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開發(fā)模板搭建
這篇文章主要介紹了詳解Weex基于Vue2.0開發(fā)模板搭建,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
Vue?中插槽的使用總結(jié)
這篇文章主要向大家分享的是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ù)方式
這篇文章主要介紹了Vue中mapMutations傳遞參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04