前面顯示Home.vue頁面元件的內容時，我們是在App.vue通過import匯入使用的。這個過程就是元件的巢狀使用。那麼我們除了App.vue可以匯入其他頁面以外，也可以通過在Home.vue中匯入其他子元件進行使用的。

src/
  |- views/
     |- Home.vue
  |- components/
     |- Menu.vue
  |- App.vue
  |- main.js

在src/components目錄下,可以建立當前頁面的子元件,例如Menu.vue

<template>
  <div>
    <ul>
      <li v-for="menu in menu_list"><a :href="menu.link">{{menu.name}}</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Menu",
  data(){
    return {
      menu_list:[
        {name:"百度", "link":"http://www.baidu.com"},
        {name:"騰訊", "link":"http://www.qq.com"},
        {name:"小米", "link":"http://www.xiaomi.com"},
      ]
    }
  }
}
</script>

<style scoped>
ul,li{
  list-style: none;
  padding: 0;
  margin: 0;
}
ul::after{
  overflow: hidden;
  clear: both;
  display: block;
  content: "";
}
li{
  float: left;
  margin: 0 20px;
}
a{
  text-decoration: none;
  color: #666;
}
</style>

接下來就可以在Home.vue中通過import匯入Menu進行使用。

效果：