vue实现按需加载组件及异步组件功能


Posted in Javascript onMay 27, 2019

说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了

学不完啊...没关系,看我的

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

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>

script中的代码:

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

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

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

然后注册组件

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

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);
  },
 },

定义的方法

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

总结

以上所述是小编给大家介绍的vue实现按需加载组件及异步组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
深入解析contentWindow, contentDocument
Jul 04 Javascript
jquery导航制件jquery鼠标经过变色效果示例
Dec 05 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
jquery图片放大镜效果
Jun 23 jQuery
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
vue+Element-ui实现登录注册表单
Nov 17 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 #Javascript
原生js实现each方法实例代码详解
May 27 #Javascript
深入学习JavaScript中的bom
May 27 #Javascript
Vue实现根据hash高亮选项卡
May 27 #Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 #Javascript
Vue使用localStorage存储数据的方法
May 27 #Javascript
了解javascript中的Dom操作
May 27 #Javascript
You might like
php获得当前的脚本网址
2007/12/10 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
js直接编辑当前cookie的脚本
2008/09/14 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
如何去除vue项目中的#及其ie9兼容性
2018/01/11 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
python计算最小优先级队列代码分享
2013/12/18 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
小学重阳节活动总结
2015/03/24 职场文书
怒海潜将观后感
2015/06/11 职场文书
一年级下册数学教学反思
2016/02/16 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android