Vue异步组件使用详解


Posted in Javascript onApril 08, 2017

Vue的异步组件,供大家参考,具体内容如下

1、前置要求

建议使用webpack;

Browserify在默认情况下不支持;

2、用法解释

首先上官网说明:异步组件

虽然说明是没问题的,但是示例中的写法怪怪的,不符合一般新手学习者在实际使用中的习惯。

嗯,换句话说,这段代码告诉你,通过这种方式引入异步组件,然后他漏掉了一些内容,比如说赋值,如何使用之类。

【1】官方示例代码:

Vue.component('async-webpack-example', function (resolve) {
 // 这个特殊的 require 语法告诉 webpack
 // 自动将编译后的代码分割成不同的块,
 // 这些块将通过 Ajax 请求自动下载。
 require(['./my-async-component'], resolve)
})

【2】官方示例代码的实际使用方法:

你如果是一个新手,看上去就懵逼了(比如之前的我,完全不知道这个例子是想干嘛)

假如你写一个test.vue文件,在<script>标签里,实际使用方法如下:

//test.vue的部分
<script>
  import Vue from 'vue'

  //关键是以下这部分代码
  //需要将引入的异步组件,赋值给变量searchSearch
  //然后在下方components对象里,将变量正常添加进去,就可以使用异步组件了
  //第一个参数是组件名,第二个是异步引入的方法
  const searchSearch = Vue.component('searchSearch', function (resolve) {
    require(['./service-search.vue'], resolve)
  })

  export default{
    data(){
      return {}
    },
    methods: {},
    components: {
      searchSearch: searchSearch
    }
  }
</script>

【3】更简单的异步组件的使用方法

上面代码还是太麻烦了,要引入Vue实例先,然后引入组件,然后才能使用。

教练,有木有更简单的?有~

<script>
  export default{
    data(){
      return {}
    },
    methods: {},
    components: {
      searchSearch: function (resolve) {
        //异步组件写法
        require(['./service-search.vue'], resolve)
      }
    }
  }
</script>

只需要把原有的searchSearch: searchSearch改为一个函数,然后在函数里异步引入就行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
javascript自执行函数
Feb 10 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
vue实现拖拽进度条
Mar 01 Vue.js
利用jQuery解析获取JSON数据
Apr 08 #jQuery
AngularJS $http模块POST请求实现
Apr 08 #Javascript
node.js实现登录注册页面
Apr 08 #Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 #Javascript
js仿微信公众平台打标签功能
Apr 08 #Javascript
详解node.js搭建代理服务器请求数据
Apr 08 #Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 #Javascript
You might like
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP中如何调用webservice的实例参考
2013/04/25 PHP
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHPMailer发送邮件
2016/12/28 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python assert语句的简单使用示例
2019/07/28 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
澳大利亚时尚前卫设计师珠宝在线:Amber Sceats
2017/10/04 全球购物
毕业生的自我鉴定
2013/10/29 职场文书
心得体会范文
2014/01/04 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
总经理任命书范本
2014/06/05 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
创业计划书之餐饮
2019/09/02 职场文书
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏