vue 自定义components

绝地灬酷狼 2022-05-23 05:44 192阅读 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 条评论，192人围观）

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

相关阅读

相关 vue自定义指令

示例：我们注册一个全局的v-focus指令 <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <

朱雀/ 2023年03月06日 03:56/ 0 赞/ 261 阅读

相关 vue 组件（component、components）

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

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

相关 vue 全局自定义组件 components

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

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

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

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

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

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

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

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

相关 vue 自定义components

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

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

相关 vue——自定义事件

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

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

相关 Vue自定义事件

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

待我称王封你为后i/ 2021年08月19日 22:18/ 0 赞/ 466 阅读

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

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

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

相关 vue 自定义指令

自定义指令: 1、全局指令: (1)创建 Vue.directive('名称',{ 钩子函数:function(el,

曾经终败给现在/ 2021年07月24日 18:28/ 0 赞/ 685 阅读