vue動態元件註冊

import vue from

'vue'
// 自動匯入components中的元件
const componentscontext = require.
context
('@/components'
,true
,/index.vue$/
)componentscontext.
keys()
.foreach
((component)
=>
)

require.context是webpack的乙個api，通過require.context函式獲取乙個特定的上下文，主要用來實現自動化匯入模組。如果需要從乙個資料夾中引入很多模組檔案，可以使用這個api，它會遍歷資料夾中的指定檔案，然後自動匯入，使我們不再需要寫大量顯式的import匯入

require.context 接受3個引數：

1、directory - 讀取的資料夾路徑

2、usesubdirectories - 是否遍歷檔案的子目錄

3、regexp - 匹配檔案的正則規則

vue動態註冊元件

vue的架構思想，其實就是想按元件化開發，提公升前端的模組復用性，因此在開發過程中，元件的巢狀是很正常的需求。例如以下需求 在index.vue頁面想呼叫元件a，a的頁面有兩種樣式，分別為b,和c，想在index.vue呼叫兩個a元件，並且a元件包含有b和c樣式。那麼在開發的時候，我習慣把b和c的樣...

Vue元件註冊

方式一 vue.component my component name 方式二 vue.component mycomponentname 方式一 在dom中可以直接用，是有效的元素 方式二 可用在單檔案元件中 single file component 元件註冊後，可在全域性使用，並且全域性元件之...

vue元件註冊

我們會在多個頁面使用button，每個頁面寫起來很麻煩，如果想把它做成乙個公用元件，使用時直接呼叫會比較方便。現在建立了乙個元件button.vue。找到main.js檔案，然後輸入如下 import button from components button.vue vue.component m...