# Vue - 組件的 全局註冊 vs 局部註冊

## 全局註冊

### 在 main.js 中註冊組件：

// vue2

import Vue from 'vue'
import App from './App.vue'

/* -------------------------------- */

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

/* -------------------------------- */

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

or

// vue2

import Vue from 'vue'
import App from './App.vue'

/* -------------------------------- */
import my-component-name from 'component的.vue檔相對路徑'

Vue.component('使用時的標籤名稱', import的名稱)

/* -------------------------------- */

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

### 在任何 .vue 中使用：

<div id="demo">
  <my-component-name></my-component-name>
</div>

特性：

- 全局註冊的行為必須在根 Vue 實例 (通過 new Vue) 創建之前發生

- 可以用在任何新創建的 Vue 根實例 (new Vue) 的模板中，在所有子組件中也可以使用

- 全局註冊所有的組件意味著即便你已經不再使用一個組件了，它仍然會被包含在你最終的構建結果中。這造成了用戶下載的 JavaScript 的無謂的增加。

:::warning
### Vue 3.0 開始不再提供功能的全局註冊，而是註冊在根元件實體上

// vue3

import { createApp } from 'vue'
import App from './App.vue'

// createApp(App).mount('#app')

const app = createApp(App)

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

or

// vue3

import { createApp } from 'vue'
import App from './App.vue'
import my-component-name from 'component的.vue檔相對路徑'

// createApp(App).mount('#app')

const app = createApp(App)

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

:::

## 局部註冊

#### 方法一：在同一個.vue創建與使用
在同一個 .vue 中使用組件：

<div id="demo">
  <my-component-name></my-component-name>
</div>

在同一個 .vue 中註冊組件：

var ComponentA = { /* ... */ }

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

在 子組件 ComponentB 局部註冊 ComponentA ：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA,
  },
  // ...
}

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

#### 方法二：在不同的.vue創建與使用
通過 Babel 和 webpack 使用 ES2015 模塊系統 ( import / require ) ：

import ComponentA from './ComponentA.vue'

export default {
  components: {
  
    'componentA': ComponentA,
    
    //or
    
    ComponentA,     // object-shorthand
    
  },
  // ...
}

> [Vue組件全局/局部註冊](https://www.itread01.com/content/1548157085.html)

>[Vue 2.x 至 3.0 快速升級指南](https://book.vue.tw/appendix/migration.html)

###### tags: `Vue`