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 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
jQuery 使用手册(四)
Sep 23 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
Nov 26 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
浅谈vue加载优化策略
Mar 19 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
利用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
基于文本的留言簿
2006/10/09 PHP
一个ubbcode的函数,速度很快.
2006/10/09 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php生成二维码
2015/08/10 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
简单实现PHP留言板功能
2016/12/21 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
探讨js中的双感叹号判断
2013/11/11 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
[46:20]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
跟老齐学Python之Python安装
2014/09/12 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
python 读写中文json的实例详解
2017/10/29 Python
python放大图片和画方格实现算法
2018/03/30 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
500行python代码实现飞机大战
2020/04/24 Python
浅析Python中字符串的intern机制
2020/10/03 Python
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
财务人员个人求职信范文
2013/12/04 职场文书
初三班主任寄语大全
2014/04/04 职场文书
地球一小时宣传标语
2014/06/24 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
预备党员转正材料
2014/12/19 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
Python基础之元组与文件知识总结
2021/05/19 Python