app.vue组件如何按需加载?


app.vue组件如何按需加载?

按需加载组件,或者异步组件,主要是应用了component的 is 属性

1、template中的代码:

这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名

<template slot-scope="scope">
	<el-button
                type="text"
               size="mini"
              @click="handleSchedule('CustomerInfoSchedule', scope.row.customer_id)"
            >详情</el-button>
	<el-button
             type="text"
              size="mini"
              @click="handleSchedule('VisitRecordSchedule', scope.row.customer_id)"
             >回访</el-button>
	<el-button
               type="text"
          size="mini"
            @click="handleSchedule('AddCustomerSchedule',scope.row.customer_id)"
            >编辑</el-button>
	<el-button
              type="text"
           size="mini"
            @click="handleSchedule('AddPeopleSchedule', scope.row.customer_id)"
             >添加联系人</el-button>
</template>
<component 
  :is="currentComponent" 
  :customer_id="customer_id" 
  @componentResult="componentResult"
 ></component>

2、script中的代码:

这里的组件使用request按需引入,我使用的点击事件,当事件触发的时候,引入对应的组件

首先在data中声明组件的属性

data() {
  return {
      currentComponent: "",
      customer_id:'',
   }
}

3、然后注册组件

这里的组件作为一个个方法,组件名是方法名,组件内容是方法体,有几个组件就写几个方法

components: {
   AddCustomerSchedule(resolve) {
        require(["../components/AddCustomer"], resolve);
      },
      AddPeopleSchedule(resolve) {
        require(["../components/AddPeople"], resolve);
      },
      CustomerInfoSchedule(resolve) {
        require(["../components/CustomerInfo"], resolve);
     },
     VisitRecordSchedule(resolve) {
       require(["../components/VisitRecord"], resolve);
    },
   },

4、定义的方法

 // 这里直接接收name,然后相对应的引入组件,同时传值
 handleSchedule(name, id) {
       this.customer_id = id;
       this.currentComponent = name;
     },
// 这是子组件触发父组件返回回来的方法,因为我的组件都是弹出框
 // 所以在子组件关闭弹出框的时候,我让this.currentComponent为空
 // 同时可以选择性的刷新数据
     componentResult(type) {
       if (type == "upData") {
         this.getTableData();
       } else {
         this.currentComponent = "";
      }
     },
Image placeholder
前端答疑
未设置
  98人点赞

没有讨论,发表一下自己的看法吧

推荐文章
ant-design-vue按需加载出错怎么办?

ant-design-vue按需加载出错怎么办?按照官方文档引入antd时,到了按需加载那步出错了,提示errorin./node_modules/ant-design-vue/es/style/in

vue组件基础用法详解

概述在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例组件是一个自定义元素或称为一个模块,包括所需的模板、逻辑和样式。在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能。通

开源React Native组件库beeshell 2.0发布

2018年,我们开源了ReactNative组件库——beeshell1.0。时隔一年,我们对ReactNative组件库继续优化,实现beeshell2.0升级,开源38个功能。希望更好的服务社区,

layui table组件常见用法总结

table是layui最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头

如何检测jquery是否已加载?

如何检测jquery是否已加载?当前网页加载jQuery后,jQuery()或$()函数将会被定义有如下两种方法进行检测:方法1:if(jQuery){ //jQuery已加载 }else{ //jQ

jQuery如何按name属性选择元素?

方法1:使用name属性选择器name属性选择器可用于按name属性选择元素。此选择器选择值与指定值完全相等的元素。语法:[name=“nameOfElement”]示例:输出:方法2:使用javas

超大规模商用 K8s 场景下,阿里巴巴如何动态解决容器资源的按需分配问题?

导读:资源利用率一直是很多平台管理和研发人员关心的话题。本文作者通过阿里巴巴容器平台团队在这一领域的工作实践,整理出了一套资源利用提升的方案,希望能够带给大家带来一些讨论和思考。引言不知道大家有没有过

号称以客户为中心的保险行业如何做到真正的“按需”服务?

随着客户消费模式的改变和对服务要求的不断提高,当前保险行业正经历深刻变化。虽然保险行业已经积累了大量的客户数据,但由于其业务的复杂性及缺少系统的建设,大多数数据都是孤立的。而在数字化浪潮的推进下,许多

安防摄像头RTSP/Onvif协议网页无插件直播视频流媒体服务器EasyNVR之按需直播如何有效利用最大上行带宽

介绍一般情况下,直播默认的播放方式是非按需直播,但很多情况下,不少用户会选择按需直播。按需直播能够减少带宽流量和服务器性能占用,最优的提高服务器的使用效率。下面我们来系统介绍下EasyNVR中按需直播

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

jquery怎么下载?

jquery怎么下载?jQuery的版本有很多,大家在选择版本的时候,一般原则是越新越好,但其实不然,jQuery版本是在不断进步和发展的,最新版是当时最高技术水平,也是最先进的技术理念。(推荐:jQ

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

使用$emit传参:如何同时接收父组件和子组件的参数?

需求描述:组件内部发射事件并且有参数传递出来,然后监听该事件时,事件处理程序又同时需要获取组件外面传进来的参数举个例子:tag-input组件监听change事件 methods:{ ...,

.vue文件怎么使用组件?

.vue文件怎么使用组件?在vue中组件以.vue结尾,一个.vue文件就是一个组件。下面介绍下在组件中使用其他组件的方法。(相关课程推荐:Vue.js教程)1、首先创建一个组件MyTest.vue

使用vue实现一个电子签名组件

使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在

使用vue实现一个电子签名组件

在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canva

Ant Design Vue 中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言在企业应用的快速开发中,我们需要尽快的完成一些功能。如果您使用了AntDesignVue,在进行表单的文件上传相关功能开发的时候,您肯定迫不及待地需要找到一篇包治百病的文章,正是如此,才有了该文的

vue加载优化策略有哪些?

方法一路由懒加载vue.js是一个比较流行的前端框架,与react.js、angular.js相比来说,vue.js入手曲线更加流畅,不管掌握多少都可以快速上手。但是单页面应用也都有其弊病,有时候首屏

avue和vue是什么关系?

Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,同时衍生出更多企业常用的组件,达到高复用,

Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。概述Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势1、Vue-cli是一套成熟的vue项目架构设计,会

vue1和vue2的区别是什么?

vue1和vue2的区别模板v2每个组件只允许有一个根元素,v1允许一个组件有多个根元素生命周期函数vue1.0周期解释init组件刚刚被创建,但Data、method等属性还没被计算出来create

vue 生成二维码插件 vue-qrcode

链接地址生成二维码安装https://www.npmjs.com/package...npm install --save qrcode.vue在组件中引入 importQrcodeVuefrom

vue源码解读(四)Vue中的异步更新策略

欢迎star我的github仓库,共同学习~目前vue源码学习系列已经更新了6篇啦~https://github.com/yisha0307/...快速跳转: Vue的双向绑定原理(已完成) 说说vu

app.vue有什么作用?

app.vue可以当做是网站首页,也可以写所有页面中共同需要的动画或者样式,不在他上面写代码也可以。只要你在router文件夹中的index.js填写好路由就ok对应index.html,你也可以改,

app.vue是什么文件?

app.vue是vue页面资源的首加载项,是主组件,页面入口文件,所有页面都是在App.vue下进行切换的;也是整个项目的关键,app.vue负责构建定义及页面组件归集。 exportde