欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue加載組件、動態(tài)加載組件的幾種方式

 更新時間：2018年08月31日 11:34:33   作者：樓蘭之幻  
組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。這篇文章通過實例代碼給大家介紹了Vue加載組件、動態(tài)加載組件的幾種方式，需要的朋友參考下吧

什么是組件：

組件是Vue.js最強大的功能之一。組件可以擴展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴展。

下面一段簡單的代碼給大家介紹Vue加載組件的幾種方式，具體代碼如下所示：

//正常加載
import index from '../pages/index.vue'
import view from '../pages/view.vue'
//懶加載
const index = resolve => require(['../pages/index.vue'], resolve)
const view = resolve => require(['../pages/view.vue'], resolve)
//懶加載 - 按組
const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')
const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')
// 懶加載 - 按組 import，基于ES6 import的特性
const index = () => import('../pages/index.vue')
const view = () => import('../pages/view.vue')

補充：Vue動態(tài)加載組件的四種方式

動態(tài)加載組件的四種方式：

1、使用import導(dǎo)入組件，可以獲取到組件

var name = 'system';
var myComponent =() => import('../components/' + name + '.vue');
var route={
  name:name,
  component:myComponent
}

2、使用import導(dǎo)入組件，直接將組件賦值給componet

var name = 'system';
var route={
  name:name,
  component :() => import('../components/' + name + '.vue');
}

3、使用require 導(dǎo)入組件，可以獲取到組件

var name = 'system';
var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
var route={
  name:name,
  component:myComponent
}

4、使用require 導(dǎo)入組件，直接將組件賦值給componet

var name = 'system';
var route={
  name:name,
  component(resolve) {
    require(['../components/' + name + '.vue'], resolve)
  }
}

總結(jié)

以上所述是小編給大家介紹的Vue加載組件、動態(tài)加載組件的幾種方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

  • vue3 學習筆記之a(chǎn)xios的使用變化總結(jié)

    vue3 學習筆記之a(chǎn)xios的使用變化總結(jié)

    本篇文章主要旨在幫助正在學vue3或者準備學vue3的同學了解網(wǎng)絡(luò)請求axios該如何使用，防止接觸了一點點vue3的同學會有個疑問。有興趣的小伙伴可以關(guān)注一下
    2021-11-11
  • vue3安裝vant實現(xiàn)按需引入和全局引入

    vue3安裝vant實現(xiàn)按需引入和全局引入

    本文主要介紹了vue3安裝vant實現(xiàn)按需引入和全局引入，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2023-04-04
  • vue-manage-system升級到vue3的開發(fā)總結(jié)分析

    vue-manage-system升級到vue3的開發(fā)總結(jié)分析

    這篇文章主要為大家介紹了vue-manage-system升級到vue3的開發(fā)總結(jié)分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-09-09
  • Vue3+ElementPlus封裝圖片空間組件的門面實例

    Vue3+ElementPlus封裝圖片空間組件的門面實例

    圖片空間是用于管理上傳圖片的工具,可以讓用戶方便地存儲、管理和調(diào)用圖片,提高工作效率,它通常具備多樣的樣式,但操作入口統(tǒng)一,便于使用,通過圖片空間組件,用戶能直接在其他模塊（例如商品圖片）中選擇所需圖片
    2024-09-09
  • 關(guān)于Element-ui中el-table出現(xiàn)的表格錯位問題解決

    關(guān)于Element-ui中el-table出現(xiàn)的表格錯位問題解決

    使用ElementUI的el-table后,偶然發(fā)現(xiàn)出現(xiàn)行列錯位、對不齊問題,下面這篇文章主要給大家介紹了關(guān)于Element-ui中el-table出現(xiàn)的表格錯位問題解決的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-07-07
  • vue+elementUI顯示表格指定列合計數(shù)據(jù)方式

    vue+elementUI顯示表格指定列合計數(shù)據(jù)方式

    這篇文章主要介紹了vue+elementUI顯示表格指定列合計數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 解決vant中 tab欄遇到的坑 van-tabs

    解決vant中 tab欄遇到的坑 van-tabs

    這篇文章主要介紹了解決vant中 tab欄遇到的坑 van-tabs，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue實現(xiàn)定位并解決內(nèi)存泄漏

    Vue實現(xiàn)定位并解決內(nèi)存泄漏

    Vue.js?是一個流行且強大的?JavaScript?框架,它允許我們構(gòu)建動態(tài)和交互式?Web?應(yīng)用程序,本文我們將深入探討?Vue.js?應(yīng)用程序中內(nèi)存泄漏的原因,并探索如何定位和修復(fù)這些問題的有效策略,希望對大家有所幫助
    2023-09-09
  • vue3在table里使用elementUI的form表單驗證的示例代碼

    vue3在table里使用elementUI的form表單驗證的示例代碼

    這篇文章主要介紹了vue3在table里使用elementUI的form表單驗證的示例代碼,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-12-12
  • mpvue小程序仿qq左滑置頂刪除組件

    mpvue小程序仿qq左滑置頂刪除組件

    最近在做小程序開發(fā)的時候，遇到了點問題。最終選擇用mpvue來做，誰知這么多坑，下面小編把我遇到的問題分享給大家，如果大家對mpvue小程序仿qq左滑置頂刪除組件相關(guān)知識感興趣的朋友一起看看吧
    2018-08-08

最新評論