Vue加載組件、動態加載組件的幾種方式

時間 2019-11-24

標籤 vue 加載組件動態幾種方式简体版

原文原文鏈接

https://cn.vuejs.org/v2/guide/components.htmlphp

https://cn.vuejs.org/v2/guide/components-dynamic-async.htmlhtml

上述內容能夠經過 Vue 的 <component> 元素加一個特殊的 is 特性來實現：vue

<!-- 組件會在 `currentTabComponent` 改變時改變 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent 能夠包括web

已註冊組件的名字，或
一個組件的選項對象

你能夠在這裏查閱並體驗完整的代碼，或在這個版本瞭解綁定組件選項對象，而不是已註冊組件名的示例。express

到目前爲止，關於動態組件你須要瞭解的大概就這些了，若是你閱讀完本頁內容並掌握了它的內容，咱們會推薦你再回來把動態和異步組件讀完。markdown

什麼是組件：異步

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

下面一段簡單的代碼給你們介紹Vue加載組件的幾種方式，具體代碼以下所示：ide

 
         //正常加載 
        
         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動態加載組件的四種方式函數

動態加載組件的四種方式：

一、使用import導入組件，能夠獲取到組件

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

二、使用import導入組件，直接將組件賦值給componet

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

三、使用require 導入組件，能夠獲取到組件

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

四、使用require 導入組件，直接將組件賦值給componet

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

JavaScript 箭頭函數（Lambda表達式）

https://blog.csdn.net/cuit/article/details/53200335

簡介

JavaScript 中，函數能夠用箭頭語法（」=>」）定義，有時候也叫「lambda表達式」。這種語法主要意圖是定義輕量級的內聯回調函數。例如：

// Arrow function: [5, 8, 9].map(item => item + 1); // -> [6, 9, 10] // Classic function equivalent: [5, 8, 9].map(function(item) { return item + 1; }); // -> [6, 9, 10]

當箭頭函數有一個參數時，參數兩邊的括號是無關緊要的，可是仍是有括號看起來看清楚。

const foo = bar => bar + 1; const bar = (baz) => baz + 1;

箭頭函數不帶參數時，必需要用括號，好比：

const foo = () => "foo";

若是函數體不是隻一行，應該用花括號，並顯式地返回（若是須要返回值）。

const foo = bar => { const baz = 5; return bar + baz; }; foo(1); // -> 6

arguments object

箭頭函數不會暴露 argument 對象，因此，argument 將簡單地指向當前scope內的一個變量。

arguments object 是全部函數中的一個本地變量。你能夠經過 arguments 對象引用函數的入參。這個對象包含傳給這個函數的每一個入參的入口，索引從0開始，例如：
arguments[0]
arguments[1]
arguments[2]

const arguments = [true]; const foo = x => console.log(arguments[0]); foo(false); // -> true

基於此，箭頭函數也不知道它的調用者。
當缺乏arguments object時，可能會有所限制（極少數狀況），其他的參數通常能夠作爲替代。

const arguments = [true]; const foo = (...arguments) => console.log(arguments[0]); foo(false); // -> false

綁定this的值

箭頭函數是 lexically scoped，這意味着其 this 綁定到了附近scope的上下文。也就是說，無論this指向什麼，均可以用一個箭頭函數保存。

看下面的例子， Cow 類有一個方法在1秒後輸出sound。

class Cow { constructor() { this.sound = "moo"; } makeSoundLater() { setTimeout(() => { console.log(this.sound); }, 1000); } } var myCow = new Cow(); var yourCow = new Cow(); yourCow.sound = "moooooo"; myCow.makeSoundLater(); yourCow.makeSoundLater();

在 makeSoundLater() 方法中，this 指向當前 Cow 對象的實例。因此在這個例子中當咱們調用 myCow.makeSoundLater()， this 指向 myCow。而後，經過使用箭頭函數，咱們保存了 this，這樣咱們就能夠在須要時引用 this.sound 了。將會輸出「moo」，而不是yourCow.makeSoundLater()輸出的「moooooo」。

隱式返回值

箭頭函數能夠經過省略掉小括號作到隱式返回值。

const foo = x => x + 1; foo(1); // -> 2

當使用隱式返回時，Object Literal 必須用花括號括起來。

Object Literal 是用花括號括起來的，分號隔開的 k-v 對象列表。

const foo = () => { bar: 1 } // foo() returns undefined const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}

顯示返回值

const foo = x => { return x + 1; } foo(1); // -> 2

語法

x => y // Implicit return x => { return y } // Explicit return (x, y, z) => { ... } // Multiple arguments (() => { ... })() // Immediately-invoked function expression