在Vue中，公共頭部是一個非常常見的需求。一個網站中的頭部通常包含了導航欄、搜索框、登錄等元素，它們需要在每個頁面上都保持一致。因此，在Vue中我們可以使用組件來實現公共頭部的功能。

下面我們來看一個實例，這個實例展示了如何在Vue中實現一個公共頭部組件。

//頭部組件代碼
<template>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
<!-- 更多標簽省略 -->
</nav>
<input type="text" placeholder="Search">
<!-- 更多元素省略 -->
</header>
</template>
<script>
export default {
name: 'Header'
}
</script>

在上面的代碼中，我們定義了一個Header組件，它包含了導航欄和搜索框等元素。在組件的<script>標簽中，我們定義了它的名稱為Header。這個組件可以在其他頁面中直接引用，從而實現了公共頭部的功能。

現在我們需要在我們的應用中使用這個Header組件。當我們需要把Header放在一個頁面中時，我們只需要引入Header組件并把它放在該頁面的模板中即可。

//某個頁面的模板代碼
<template>
<Header />
<!-- 其他內容省略 -->
</template>
<script>
import Header from '@/components/Header';
export default {
components: {
Header
},
//其他代碼省略
}
</script>

在上面的代碼中，我們通過import引入了Header組件。然后通過在components對象中注冊它，使得在該頁面的模板中可以使用<Header />來引用它。這個Header組件將會被渲染在該頁面的模板中，從而實現了公共頭部的功能。

總的來說，Vue的組件化特性使得實現公共頭部變得非常容易。我們只需要將公共頭部封裝成一個組件，然后在其他頁面中引用它即可。這樣就可以避免在每個頁面中都寫一遍相同的頭部HTML代碼。此外，組件化還有利于代碼的復用和維護，使得開發工作變得更加高效。