本地元件
到目前為止，我們包含元件的方式使它們可以從專案中的所有 *.vue 檔案中訪問。
元件可以被本地化，這意味著它們只能在特定的 *.vue 檔案中訪問。
全域性元件
我們到目前為止在 main.js 中包含元件的方式，使元件可以在該專案所有其他 *.vue 檔案的 <template> 中訪問。
示例
我們在 CompTwo.vue 和 App.vue 中都使用了 CompOne.vue 元件，以展示透過我們當前的 main.js 設定，元件是可以相互訪問的。
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import CompOne from './components/CompOne.vue'
import CompTwo from './components/CompTwo.vue'
const app = createApp(App)
app.component('comp-one', CompOne)
app.component('comp-two', CompTwo)
app.mount('#app')
本地元件
我們可以直接在一個 *.vue 檔案的 <script> 標籤中包含一個元件，而不是在 main.js 中包含。
如果我們直接在一個 *.vue 檔案中包含一個元件，那麼該元件將只在該檔案中本地可用。
示例
要使 CompOne.vue 元件成為 App.vue 的本地元件，並且只能在該檔案中訪問，我們需要將其從 main.js 中移除。
main.js:
import { createApp } from 'vue'
import App from './App.vue'
import CompOne from './components/CompOne.vue'
import CompTwo from './components/CompTwo.vue'
const app = createApp(App)
app.component('comp-one', CompOne)
app.component('comp-two', CompTwo)
app.mount('#app')
然後，將其直接包含在 App.vue 的 <script> 標籤中。
App.vue:
<template>
<h3>Local Component</h3>
<p>The CompOne.vue component is a local component and can only be used inside App.vue.</p>
<comp-one />
<comp-two />
</template>
<script>
import CompOne from './components/CompOne.vue';
export default {
components: {
'comp-one': CompOne
}
}
</script>
現在 CompOne.vue 元件僅在 App.vue 中可用。
如果您在開發模式下執行應用程式，並嘗試從 CompTwo.vue 內部使用 CompOne.vue，您會收到一個警告。
