本文主要介紹了淺談Vue組件及組件的注冊方法，詳細的介紹了什么是組件，及其組件注冊的兩種方式(全局和局部)。
相信在使用Vue進行項目開發的時候很多人會接觸到vue組件，最常見的就是我們使用的element-ui組件庫，用起來確實很方便，大大減少了我們的開發時間。在一個項目中其實有很多可復用的代碼塊，如果我們可以把這些內容封裝成一個組件就能夠很方便的進行各種重復使用。
那么什么是Vue組件呢？它是vue.js最強大的功能之一，是可擴展的html元素，是封裝可重用的代碼，同時也是Vue實例，可以接受相同的選項對象(除了一些根級特有的選項) 並提供相同的生命周期鈎子。
使用組件
組件名大小寫
定義組件名的方式有兩種：
使用 kebab-case
|
1
|
Vue.component(
'my-component-name'
, {
/* ... */
})
|
當使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component-name>。
使用 PascalCase
|
1
|
Vue.component(
'MyComponentName'
, {
/* ... */
})
|
當使用 PascalCase (駝峰式命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。
組件的注冊分為全局注冊和局部注冊。
全局注冊
我們已經知道創建一個Vue實的方法
|
1
2
3
4
|
new
Vue({
el:
'#app'
,
//選項
})
|
注冊全局組件可以使用Vue.component（tagName，options）。例如
|
1
2
3
4
5
6
7
|
Vue.component(
'my-apprvuser'
,{
template:
''
,
data:
function
(){
return
{}
}
//選項
})
|
上面是一個最簡單的全局注冊例子，但是實際上我們並不會這么用。以vue-cli為腳手架工具來說。我們會單獨創建一個vue文件來封裝一個組件。這里我們創建一個 apprvUser.vue 文件
該文件結構和正常的vue文件一樣，里面是我們要封裝的組件
然后在我們的main.js文件（也是入口文件）中注冊全局組件
|
1
2
3
|
//注冊審核人（申請）組件
import apprvUser from
'./views/audit/apprvUser'
Vue.component(
'my-apprvuser'
,apprvUser)
|
這里需要注意引用vue文件的路徑不能錯，這樣在全局注冊之后你在其他組件中就能直接使用組件<my-apprvuser></my-apprvuser>，全局注冊組件就是這樣了。
局部注冊
局部注冊就是在你想要使用的vue文件中進行注冊引入。vue官網api中有一個簡單的例子，大家可以看一下，但是實際過程中我們基本上都不會那樣用。
還是用上述的 apprvUser.vue 文件來舉例。
我是在該文件同級目錄下的另一個vue文件中注冊該組件的，在export default的一個選項components中進行該組件的注冊。
這就是局部組件的注冊，在當前文件中就可以使用該組件了，但是在其他組件中不能直接使用該組件。要在其他組件/vue文件中使用該組件必須進行全局或者局部注冊。
|
1
2
3
4
5
6
7
8
|
//注冊審核人（申請）組件
import apprvUser from
'./apprvUser'
export
default
{
components: {
'my-apprvuser'
:apprvUser
},
}
|
以上就是本文的全部內容，希望對大家的學習有所幫助。