Vue（12）元件的組織結構和元件註冊

Silent丿丶黑羽發表於2021-07-02
Vue元件

元件的組織

通常一個應用會以一棵巢狀的元件樹的形式來組織：

例如，你可能會有頁頭、側邊欄、內容區等元件，每個元件又包含了其它的像導航連結、博文之類的元件。

為了能在模板中使用，這些元件必須先註冊以便 Vue 能夠識別。這裡有兩種元件的註冊型別：全域性註冊和區域性註冊。至此，我們的元件都只是通過 Vue.component 全域性註冊的：

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

全域性註冊的元件可以用在其被註冊之後的任何 (通過 new Vue) 新建立的 Vue 根例項，也包括其元件樹中的所有子元件的模板中。
 

元件名

在註冊一個元件的時候，我們始終需要給它一個名字。比如在全域性註冊的時候我們已經看到了：

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

該元件名就是 Vue.component 的第一個引數
 

元件命名方式

定義元件名的方式有兩種：

  • 短橫線分隔命名：my-component-name
  • 首字母大寫命名：MyComponentName

短橫線分隔命名

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

當使用 (短橫線分隔命名) 定義一個元件時，使用時例如： <my-component-name></my-component-name>
 

首字母大寫命名

Vue.component('MyComponentName', { /* ... */ })

當使用 (首字母大寫命名) 定義一個元件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。
注意，儘管如此，直接在 DOM (即非字串的模板) 中使用時只有 短橫線分隔命名 是有效的。
 

全域性註冊

全域性註冊就是使用Vue.component 來建立元件：

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

這些元件是全域性註冊的。也就是說它們在註冊之後可以用在任何新建立的Vue根例項 (new Vue) 的模板中。比如：

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

但是全域性註冊實際專案中用的不多
 

區域性註冊

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

在這些情況下，你可以通過一個普通的 JavaScript物件來定義元件：

let ComponentA = {
    template: `<p>hello</p>`
  }
let ComponentB = {
  template: `<p>world</p>`
}

然後在 components 選項中定義你想要使用的元件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

對於 components 物件中的每個 property 來說，其 property 名就是自定義元素的名字，其 property 值就是這個元件的選項物件。

當然實際開發過程中我們使用模組系統註冊元件更多，這塊後面再介紹

相關文章