使用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>
Logo

前往低代码交流专区

更多推荐