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 相关文章推荐
网页源代码保护(禁止右键、复制、另存为、查看源文件)
May 23 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
java和js实现的洗牌小程序
Sep 30 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
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缓存类分享     php缓存机制
2014/01/22 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
jQuery实现ichat在线客服插件
2014/12/29 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
详解AngularJS实现表单验证
2015/12/10 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
原生实现一个react-redux的代码示例
2018/06/08 Javascript
微信小程序登录数据解密及状态维持实例详解
2019/05/06 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
详解Golang 与python中的字符串反转
2017/07/21 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
Python函数中的不定长参数相关知识总结
2021/06/24 Python
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫