• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • vue手册
  • php手册
  • MySQL手册
  • apache手册
  • redis手册
  • components

    • 类型:Object
    • 详细:包含组件实例可用组件的哈希表。
    <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>
    

    上篇:directives