在開發Web應用時，通過組件化開發的方法能夠提高代碼的復用性和可維護性。Vue.js是一種流行的前端框架，它提供了一種簡單、高效的組件化方式。使用Vue.js，我們可以將應用拆分為多個組件，每個組件負責獨立的UI渲染和狀態管理。

在實際開發中，有些組件是所有頁面共享的，如網站頭部導航菜單、頁腳版權信息等。在Vue.js中，我們可以使用Vue組件方式將此類組件抽象為公共組件，并在每個需要使用的頁面中引入。當然，我們可以手動在每個頁面上寫上公共組件標簽，但這種方式不夠優雅、不夠方便，更不利于維護。在實際開發中，我們可以考慮將公共組件的引入封裝進一個Vue全局插件中。

Vue.component('app-header', {
// 具體組件定義
});
Vue.use({
install: function(Vue, options) {
// 注冊一個全局指令 'v-app-header'，用于動態引入公共頭部組件
Vue.directive('app-header', {
inserted: function(el) {
var appHeader = Vue.component('app-header');
var component = new appHeader().$mount();
el.appendChild(component.$el);
}
});
}
});

如上代碼示例，我們通過Vue.directive方法注冊了一個全局指令'v-app-header'，用于在DOM插入時查找公共頭部組件，并動態地將其置于指定元素內部。在這個過程中，我們需要使用Vue.component方法獲取具體公共組件定義，并將其實例化并掛載到指定元素內。

使用方式如下：

<div v-app-header></div><div v-app-header>
<header>
<!-- 公共頭部組件 -->
</header>
</div>

如此，便可以實現在每個頁面內自由引入公共組件，而無需考慮具體實現方式。這種插件方式不僅優雅，還能幫助我們解耦系統與公共組件的具體實現，方便日后維護和升級。