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 相关文章推荐
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
jQuery参数列表集合
Apr 06 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
javascript间隔刷新的简单实例
Nov 14 Javascript
JS实现简单抖动效果
Jun 01 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
Vue页面骨架屏注入方法
May 13 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
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 判断常量,变量和函数是否存在
2009/04/26 PHP
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
关于访问控制的一首PHP面试题(对属性或方法的访问控制)
2012/09/13 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
css3实现超立体3D图片侧翻倾斜效果
2014/04/16 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
培训讲师邀请函
2014/01/10 职场文书
爱情检讨书大全
2014/01/21 职场文书
超越自我演讲稿
2014/05/21 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Elasticsearch 聚合查询和排序
2022/04/19 Python