Vue.js 是一款用于構建 Web 界面的漸進式 JavaScript 框架。通過組合易于使用的 API 和靈活的虛擬 DOM，Vue 可以讓你更加易于理解和管理你的代碼。Vue 還可以與其它庫或現有項目集成。

在 Vue 中，我們通常會創建不同的組件來表示不同的 UI 塊。但是，有些 UI 塊可能在應用程序的多個位置都有出現，那么我們就需要在多個組件中復制相同的代碼。這會導致代碼重復、維護困難和性能下降。因此，Vue 提供了通用模塊組件來解決這個問題。

通用模塊組件是一種重復使用的 UI 組件，可以在應用程序中的多個組件中使用。可以將其視為一個簡單的 JavaScript 模塊，傳遞一些必要的屬性并返回一個可以運行的組件。通過使用通用模塊組件，我們可以在多個組件中復用相同的業務邏輯和 UI。

export default {
name: 'MyComponent',
props: {
message: String
},
template: '<div>{{ message }}</div>'
}

上面的代碼是一個簡單的通用模塊組件的示例。它接收一個名為 message 的屬性，然后在模板中將其顯示出來。為了在應用程序中使用這個組件，我們需要在其它組件中引入它。

<template>
<div>
<my-component message="Hello, Vue!" />
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
name: 'App',
components: {
MyComponent
}
}
</script>

在上述代碼中，我們在 App 組件中引入了 MyComponent 組件，并將其注冊為一個本地組件。現在，我們可以在 App 組件的模板中使用它了。注意，我們傳遞了一個名為 message 的屬性，這個屬性將在 MyComponent 中使用。

通用模塊組件的好處在于它們可以大大減少代碼冗余，使應用程序更加易于維護和理解。如果你發現自己在多個組件中復制相同的代碼，請考慮將其提取為一個通用模塊組件。