目錄

• 1、元件的組織
• 2、元件名
• 2.1 元件命名方式
• 3、全域性註冊
• 4、區域性註冊

1、元件的組織

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

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

為了能在模板中使用，這些元件必須先註冊以便 能夠識別。這裡有兩種元件的註冊型別：全域性註冊和區域性註冊。

至此，我們的元件都只是通過 Vue.component 全域性註冊的：

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

全域性註冊的元件可以用在其被註冊之後的任何 (通過 new Vue

2、元件名

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

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

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

2.1 元件命名方式

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

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


短橫線分隔命名

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

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


首字母大寫命名

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

當使用 (首字母大寫命名) 定義一個元件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。

注意：儘管如此，直接在 DOM (即非字串的模板) 中使用時只有 短橫線分隔命名 是有效的。

3、全域性註冊

全域性註冊就是使用Vue.comphttp://www.cppcns.comonent 來建立元件：

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' })

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

4、區域性註冊

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

在這www.cppcns.com些情況下，你可以通過一個普通的 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 值就是這個元件的選項物件。

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

到此這篇關於Vue 元件組織結構及元件註冊詳情的文章就介紹到這了,更多相關Vue 元件組織結構及元件註冊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！