3.基礎元件的自動化全域性註冊
我們前一篇提到了元件註冊，但是那裡用的是我們的全域性註冊。
註冊分為區域性註冊和全域性註冊
下面開始講解
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
src=
"">
script
>
head
>
>
>
>
v-for
="i in names"
v-bind:value
="i"
>
xhy>
ul>
div>
>
vue.
component
("xhy",}'
});var vm =
newvue(,
]}})
;script
>
body
>
html
>
但是這一位置即使我們不使用目標元件，它在打包的時候也會被打包進來，使用者在請求js的時候會多出很多無謂的js**
如果希望是區域性註冊，那我們需要通過components屬性引入我們需要使用的元件，而該元件的作用域也只在該元件，即使是子元件也無法使用。
下面我們介紹兩種區域性註冊，一種是js變數形式的元件一種是webpack種的模組形式，也就是我們的*.vue檔案
省略的部分就是我們前面全域性註冊元件的{}內的內容（props、template等）
var componenta =
var componentb =
var componentc =
new
vue(
})
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
src=
"">
script
>
head
>
>
>
>
v-for
="i in names"
v-bind:value
="i"
>
xhy>
ul>
div>
>
var component1 =}'}
;var vm =
newvue(,
data:,]
}});
script
>
body
>
html
>
import componenta from
'./componenta.vue'
export
default
,// ...
}
在專案中我們不能總是在每個元件中匯入一大堆的元件，因為很多小組件是基本上每個元件都需要使用的，所有這些元件我們使用全域性註冊即可，但是開發通常為了遵循開閉原則，提高拓展性。我們這裡需要用到自動化的全域性註冊。使用 require.context 只全域性註冊這些非常通用的基礎元件。
這裡有乙份可以讓你在應用入口檔案 (比如 src/main.js) 中全域性匯入基礎元件的示例**：
import vue from
'vue'
import upperfirst from
'lodash/upperfirst'
import camelcase from
'lodash/camelcase'
const requirecomponent = require.
context
(// 其元件目錄的相對路徑
'./components'
,// 是否查詢其子目錄
false
,// 匹配基礎元件檔名的正規表示式
/base[a-
z]\w+\.
(vue|js)$/
)requirecomponent.
keys()
.foreach
(filename =>
)
vue學習筆記3 元件
1 元件命名 a.全小寫加連線符 vue.component my component name 當使用 kebab case 短橫線分隔命名 定義乙個元件時，你也必須在引用這個自定義元素時使用 kebab case，例如。b 駝峰式 vue.component mycomponentname 當使...
Vue學習筆記 七 元件
在正式開始講解元件之前，我們先來看乙個簡單的例子 下面我們詳細解讀一下上面這份 vue.component button counter template times 我們首先通過全域性方法vue.component 建立了乙個名為 button counter 的全域性元件 該方法的第乙個引數是元...
Vue 3 元件註冊
上一節實驗中，我們大概了解了一下元件的基礎，這一節實驗我們要深入元件註冊。我們在註冊元件的時候，我們都會給元件起乙個名字，就好像我們人的名字一樣。需要注意的是，我們的元件名字是有一些規範的，一般這種單檔案元件，我們強烈推薦使用字母全小寫且必須包含乙個連字元，全部小寫字母，單詞使用中華線 隔開。例如我...