1、組件的組織

通常一個應(yīng)用會以一棵嵌套的組件樹的形式來組織：

例如：我們可能會有頁頭、側(cè)邊欄、內(nèi)容區(qū)等組件，每個組件又包含了其它的像導(dǎo)航鏈接、博文之類的組件。

為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型：全局注冊和局部注冊。

至此，我們的組件都只是通過 Vue.component 全局注冊的：

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

全局注冊的組件可以用在其被注冊之后的任何 (通過 new Vue) 新創(chuàng)建的 Vue 根實(shí)例，也包括其組件樹中的所有子組件的模板中。

2、組件名

在注冊一個組件的時候，我們始終需要給它一個名字。比如在全局注冊的時候我們已經(jīng)看到了：

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

該組件名就是 Vue.component 的第一個參數(shù)

2.1 組件命名方式

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

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


短橫線分隔命名

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

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


首字母大寫命名

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

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

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

3、全局注冊

全局注冊就是使用Vue.component 來創(chuàng)建組件：

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

這些組件是全局注冊的。也就是說它們在注冊之后可以用在任何新創(chuàng)建的Vue根實(shí)例 (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' })

但是全局注冊實(shí)際項目中用的不多

4、局部注冊

全局注冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊所有的組件意味著即便你已經(jīng)不再使用一個組件了，它仍然會被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 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 值就是這個組件的選項對象。

當(dāng)然實(shí)際開發(fā)過程中我們使用模塊系統(tǒng)注冊組件更多，這塊后面再介紹

到此這篇關(guān)于Vue 組件組織結(jié)構(gòu)及組件注冊詳情的文章就介紹到這了,更多相關(guān)Vue 組件組織結(jié)構(gòu)及組件注冊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論