vue之元件註冊

居老師的狗子發表於2019-03-12
Vue元件

一、元件名

　　寫元件之前你要明確你的目的，想要做一個什麼樣的元件，我們在註冊一個元件的時候，需要給元件一個名字，對於命名，儘可能明確，使用 kebab-case (短橫線分隔命名) 或 PascalCase (首字母大寫命名)。

　　使用 kebab-case (短橫線分隔命名) 定義一個元件時，我們在引用這個自定義元素時其格式 ：

Vue.component('my-component-name', { /* ... */ })
<my-component-name>

　　使用 PascalCase (首字母大寫命名) 定義一個元件時，我們引用這個自定義元素時，其格式有兩種，不過有時這種命名的元件在呼叫時候，會自動解析成短橫線分割命名。

Vue.component('MyComponentName', { /* ... */ })
<my-component-name> 
<MyComponentName>

二、全域性註冊

　　元件全域性註冊後，可以在任何新建立的Vue根例項的模板中使用。

Vue.component('my-component-name', {
  // ... 選項 ...
})

三、區域性註冊

　　全域性註冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構建系統，全域性註冊所有的元件意味著即便你已經不再使用一個元件了，它仍然會被包含在你最終的構建結果中。這造成了使用者下載的 JavaScript 的無謂的增加。

四、在模板系統中區域性註冊

　　目前學習vue都是用webpack構建的，對於一個網址各元件應該怎麼構造分配還是不夠熟悉。

我們在不同元件中複用其他元件，需要在區域性註冊之前匯入每個你想使用的元件。

例如，在一個假設的 ComponentB.js 或 ComponentB.vue 檔案中，我們需要使用ComponentA和ComponentC，那麼我們需要import，同時在 components 選項中定義你想要使用的元件。

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

五、基礎元件的自動化全域性註冊（還未實際應用過）

之前寫的父子元件都不是基礎通用的元件，如果我設計了很多button類，input類的只包含這種單個元素，在不同元件裡頻繁的使用，那麼就會造成有一些元件中會有很多包含基礎元件的長列表，會很冗雜。

如果你使用了 webpack (或在內部使用了 webpack 的 Vue CLI 3+)，那麼就可以使用 require.context 只全域性註冊這些非常通用的基礎元件。

 

相關文章