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>