Vue的組件是Vue.js最強大的功能之一。通過組件，Vue讓我們可以把多個小的、獨立的、可復用的部件組合成大的、復雜的應用程序。

這里我們用Vue組件來創建一個電話簿。首先，我們需要define一個PhoneBook組件，在里面編寫我們的電話簿應用程序的代碼：

// PhoneBook組件
Vue.component('phone-book', {
data() {
return {
contacts: [{
name: 'Tom',
phone: '12345678900'
}, {
name: 'Jerry',
phone: '09876543211'
}]
}
},
template: `
<div>
<h3>電話簿</h3>
<ul>
<li v-for="(contact, index) in contacts" :key="index">
{{contact.name}}: {{ contact.phone }}
</li>
</ul>
</div>
`
})

接下來，我們在HTML文件中使用PhoneBook組件：

<div id="app">
<phone-book></phone-book>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>

最后，我們需要在main.js中創建Vue實例，開始運行我們的應用程序：

new Vue({
el: '#app'
})

現在我們的電話簿應用程序已經創建好了，可以在瀏覽器中查看它的效果！