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修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP 引用文件技巧
2010/03/02 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
css和js实现弹出登录居中界面完整代码
2017/11/26 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
python正则中最短匹配实现代码
2018/01/16 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python3实现绘制二维点图
2019/12/04 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
神路信息Java面试题目
2013/03/31 面试题
如何手工释放资源
2013/12/15 面试题
科长竞争上岗演讲稿
2014/05/12 职场文书
拓展策划方案
2014/06/03 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
时尚女魔头观后感
2015/06/04 职场文书
同事离别感言
2015/08/04 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
SpringBoot Http远程调用的方法
2022/08/14 Java/Android