Alex宅幹嘛ReVue-Day10-元件區域註冊和全域註冊

在這個單元主要是介紹 Vue 元件在區域註冊和全域註冊上要怎麼使用

引用其他 Vue 元件的 Vue 元件

Vue的字元件可以被其他的子元件給引入使用的
ex:

---HTML---
<div id="app">
  <adv-component></adv-component>
</div>

---JavaScript---
const BasicComponent = {
  template: `<div>Landy</div>`
}

const AdvanceComponent = {
  template: `<basic-component></basic-component>`   // 引用別的子元件 
}

Vue.component('basic-component', BasicComponent)   // 全域註冊的元件 
Vue.component('adv-component', AdvanceComponent)

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

Vue 的 components 屬性

當某些 Vue 的元件用區域變數來註冊。
那我們可以在某些要引入這些元件的 Vue 物件中加入 components 屬性，來將這些元件給納進來坐使用。

另外你要考慮，如果，妳的某些模組在特定的頁面下才會使用的話，那你就要考慮使用區域註冊的方式來註冊這些元件，不然，你每一個元件都用
全域註冊的話，會導致你最後的專案檔會很大一包。

ex:

---HTML---
<div id="app">
  <adv-component></adv-component>
</div>

---JavaScript---
const BasicComponent ={
  template: `<div>Landy</div>`
}

const AdvComponent ={
  template: `<basic-component></basic-component>`,
  components: {
    'basic-component': BasicComponent,
  }
}

new Vue({
  el: '#app',
  components: {
    'adv-component':  AdvComponent,
  }
})

以上這個範例你就可以看到我們想在元件 AdvComponent 使用區域元件 BasicComponent， 那我們就需要將該元件加入到自己的 components，達到在該元件中執行區域註冊的效果。
另外，BasicComponent 在 AdvComponent 中的 key 值是 basic-component 。
接著，我們在 new Vue 物件中引入 AdvComponent，故要將它用 compoents 加進來，達到在 new Vue 中區域註冊的效果。
另外，我們在 new Vue 中為 AdvComponent 取的 key 值是 adv-component，故在new Vue 的 HTML 範圍中使用它的時候就加入 標籤就可以使用囉。