vue-如何在组件中引入其它组件

组件的使用三步
1：导入组件
import 自定义的一个组件名 from "组件路径";
注意点，这里组件路径就算是当前同一目录也最好加上"./组件名"，不然会报错
2：注册组件
组件的使用是需要注册的，注册方式为

export default {
  components: {
    组件名,     //注册的组件都写在components对象下。
  }
}

3：使用组件(写到相应html位置即可)
<组件名></组件名> //该组件名来自于在组件注册时的组件名

<template>
  <div class="main">
    <!-- 使用组件  -->
    <!-- 在这index.vue是父组件，top，middle，bottom是子组件 -->
    <!-- top与middle是兄弟组件 -->
    <top></top>
    <middle></middle>
    <bottom></bottom>
  </div>
</template>
<script>
// 导入组件  这里面top,middle,bottom是需要另外创建的vue组件，这里是没创建的
import top from "./top.vue";
import middle from "./middle.vue";
import bottom from "./bottom.vue";

export default {
  // 组件注册
  components: {
    top, //相当于top:top
    middle,
    bottom
  }
};
</script>
<style>
.main {
  width: 100%;
}
.main img {
  width: 100%;
}
</style>