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 相关文章推荐
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
下拉框select的绑定示例
Sep 04 Javascript
Javascript 数组排序详解
Oct 22 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
微信小程序性能优化之checkSession的使用
Mar 06 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 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错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
vue实现广告栏上下滚动效果
2020/11/26 Vue.js
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python多进程控制学习小结
2018/10/31 Python
python3.x实现base64加密和解密
2019/03/28 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
html5需遵循的6个设计原则
2016/04/27 HTML / CSS
护理自荐信范文
2013/10/05 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
干部考核评语
2014/04/29 职场文书
公司建议书怎么写
2014/05/15 职场文书
开发房地产协议书
2014/09/14 职场文书
2015年大学生工作总结
2015/04/21 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书