這篇文章主要介紹的是Vue 組件組織結(jié)構(gòu)及組件注冊(cè)，為了能在模板中使用，這些組件必須先注冊(cè)以便 Vue 能夠識(shí)別。這里有兩種組件的注冊(cè)類型：全局注冊(cè)和局部注冊(cè)。至此，我們的組件都只是通過(guò) Vue.component 全局注冊(cè)的，文章學(xué)詳細(xì)內(nèi)容,需要的朋友可以參考一下

1、組件的組織

通常一個(gè)應(yīng)用會(huì)以一棵嵌套的組件樹(shù)的形式來(lái)組織：

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

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

至此，我們的組件都只是通過(guò) Vue.component 全局注冊(cè)的：

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

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

2、組件名

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

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

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

2.1 組件命名方式

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

短橫線分隔命名：my-component-name
首字母大寫(xiě)命名：MyComponentName

短橫線分隔命名

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

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

首字母大寫(xiě)命名

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

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

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

3、全局注冊(cè)

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

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

這些組件是全局注冊(cè)的。也就是說(shuō)它們?cè)谧?cè)之后可以用在任何新創(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' })

但是全局注冊(cè)實(shí)際項(xiàng)目中用的不多

4、局部注冊(cè)

全局注冊(cè)往往是不夠理想的。比如，如果你使用一個(gè)像 webpack 這樣的構(gòu)建系統(tǒng)，全局注冊(cè)所有的組件意味著即便你已經(jīng)不再使用一個(gè)組件了，它仍然會(huì)被包含在你最終的構(gòu)建結(jié)果中。這造成了用戶下載的 JavaScript的無(wú)謂的增加。

在這些情況下，你可以通過(guò)一個(gè)普通的 JavaScript對(duì)象來(lái)定義組件：

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

然后在 components 選項(xiàng)中定義你想要使用的組件：

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

對(duì)于 components 對(duì)象中的每個(gè) property 來(lái)說(shuō)，其 property 名就是自定義元素的名字，其 property 值就是這個(gè)組件的選項(xiàng)對(duì)象。

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

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

您可能感興趣的文章: