Vue cli之组件的嵌套

前面显示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进行使用。

 

 

效果：