vue 自定義components

使用vue編寫界面的時候，我們需要把一個界面裏面的不同功能進行拆分，拆分到其他的文件裏面，這樣的邏輯更加清晰，不多說了，直接上代碼，看下如何進行拆分：

<template>
  <div >

    <div id="header">
      <h1>頭部</h1>
    </div>

    <div id="nav">

        <button @click="myFileList">我的文件列表</button>
        <button @click="myCollectList">收藏列表</button>
        <button @click="downList">文件下載列表</button>

    </div>

    <div id="section">

      <component :is="view" ></component>

    </div>

    <div id="footer">
        Copyright
    </div>

 </div>
</template>
<script>
   //這裏就是自己定義的組件，把需要加載的組件全部寫在這裏
  import fileList from './fileList'
  import collect from './CollectList'
  import downFile from './downList'
export default {


  data(){

    return {

      view: 'v-filelist'
    }
  },
  methods: {

        myFileList(){

            this.view = 'v-filelist'; //切換組件

        },
        myCollectList(){

            this.view = 'v-collect';
        },
        downList(){

            this.view = 'v-downFile';
        }
  },
  components: {
      'v-filelist': fileList,//註冊組件
      'v-collect':collect,
      'v-downFile':downFile
  }


}

</script>