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 表单规则集合对象
Jul 21 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
JavaScript对IE操作的经典代码(推荐)
Mar 10 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python定时器线程池原理详解
2020/02/26 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
八年级物理教学反思
2014/01/19 职场文书
妇产医师自荐信
2014/01/29 职场文书
四查四看剖析材料
2014/02/14 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
竞聘上岗演讲
2014/05/19 职场文书
2014年科室工作总结
2014/11/20 职场文书
中标通知书
2015/04/17 职场文书
黄埔军校观后感
2015/06/10 职场文书
科级干部培训心得体会
2016/01/06 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Java 在生活中的 10 大应用
2021/11/02 Java/Android