Vue是一個流行的JavaScript框架，有許多開發人員在使用它來構建豐富的Web應用程序。在Vue中，共通組件是非常重要的，因為它們可以重復使用，簡化代碼并提高應用程序的可維護性。在本文中，我們將討論Vue共通組件的使用和創建。

在Vue中，共通組件是一些可重復使用的組件，與應用程序的其他部分分離。共通組件可以包括各種各樣的元素，例如按鈕，表格，圖標等等。當然，這些組件可以直接在Vue文件中定義并使用，也可以通過單獨的JavaScript文件來定義，并在多個Vue文件中使用。

// 在Vue文件中定義按鈕組件
<template>
<button class="btn">{{text}}</button>
</template>
<script>
export default {
name: 'MyButton',
props: {
text: { type: String, default: 'Click Me' }
}
}
</script>
<style scoped>
.btn {
// 樣式
}
</style>

由于共通組件可以在多個Vue文件中重復使用，因此我們可以將它們提取出來，形成一個單獨的文件，以便在需要時進行引用。這樣做的好處是可以在整個應用程序中維護一個可擴展的組件庫，并避免重復定義代碼。

// 在單獨的JavaScript文件中定義模態框組件
export default {
name: 'MyModal',
props: {
title: { type: String, default: 'Modal Title' }
},
data() {
return {
visible: false
}
},
methods: {
openModal() {
this.visible = true
},
closeModal() {
this.visible = false
}
}
}

我們可以通過Vue.use()方法在整個應用程序中注冊共通組件。使用Vue.use()方法需要將共通組件傳遞給該方法：

// 全局注冊按鈕組件
import MyButton from '@/components/MyButton.vue'
Vue.use(MyButton)

當全局注冊完成后，我們就可以在任何Vue文件中使用組件，無需再次導入或注冊：

<template>
<div>
<my-button text="Click Me"></my-button>
</div>
</template>

總之，共通組件是Vue中一個非常重要且有用的概念。使用共通組件可以使我們的代碼更加清晰、簡潔，并且有助于提高代碼的可維護性。在Vue中創建和使用共通組件是非常簡單的，我們只需要遵循一些簡單的規則和最佳實踐即可。