vue 自定义components

绝地灬酷狼 2022-05-23 05:44 143阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 组件（component、components）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

分手后的思念是犯贱/ 2022年12月12日 15:07/ 0 赞/ 182 阅读

相关 vue 全局自定义组件 components

创建组件在/components目录下创建tabBar.vue <template> <div class="barBar-container">

╰半橙微兮°/ 2022年12月10日 01:20/ 0 赞/ 179 阅读

相关 vue 自定义指令

项目中使用指令的情景是“有无权限” ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

灰太狼/ 2022年11月04日 12:29/ 0 赞/ 230 阅读

相关微信小程序自定义组件Component

在根目录创建个目录components，然后右键新建Component。做一个小组件示例： wxml: <view class="header">

刺骨的言语ヽ痛彻心扉/ 2022年10月28日 14:27/ 0 赞/ 51 阅读

相关 Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

港控/mmm°/ 2022年07月12日 14:51/ 0 赞/ 257 阅读

相关 vue插件（自定义组件或js文件使用），vue.extend()，vue.component()注册组件

一、vue.use()自定义组件或者引用第三方组件（即vue文档中的插件）？参考：https://cn.vuejs.org/v2/guide/plugins.html

淩亂°似流年/ 2022年05月24日 07:18/ 0 赞/ 219 阅读

相关 vue 自定义components

使用vue编写界面的时候，我们需要把一个界面里面的不同功能进行拆分，拆分到其他的文件里面，这样的逻辑更加清晰，不多说了，直接上代码，看下如何进行拆分： <templa

绝地灬酷狼/ 2022年05月23日 05:44/ 0 赞/ 144 阅读

相关 vue 自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你

男娘i/ 2022年04月03日 04:30/ 0 赞/ 372 阅读

相关 vue——自定义事件

每个 Vue 实例都实现了[事件接口][Link 1]，即：使用 `$on(eventName)` 监听事件使用 `$emit(eventName)` 触发事

﹏ヽ暗。殇╰゛Y/ 2021年09月14日 12:54/ 0 赞/ 409 阅读

相关微信小程序自定义组件-自定义顶部-Component

前言：在不同的页面重复使用自定义组件;自定义组件可以理解一个页面，在不同页面显示出来，一个自定义的组件也是由json、wxml、wxss、js 4个文件组成的，下面点击tab

Dear 丶/ 2021年07月25日 01:15/ 0 赞/ 595 阅读