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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
js实现拖拽效果
Feb 12 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
js 数组 fill() 填充方法
Nov 02 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
php生成WAP页面
2006/10/09 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
网页常用特效代码整理
2006/06/23 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
js实现分页功能
2017/05/24 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
原JS实现banner图的常用功能
2017/06/12 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
Python中查看文件名和文件路径
2017/03/31 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python爬虫之Selenium实现键盘事件
2020/12/04 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
.net面试题
2015/12/22 面试题
数控技术专业推荐信
2013/11/01 职场文书
自考毕业生自我鉴定
2013/11/04 职场文书
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
培训演讲稿范文
2014/01/12 职场文书
优秀教师主要事迹
2014/02/01 职场文书
交通事故私了协议书
2014/04/16 职场文书
单位消防安全责任书
2014/07/23 职场文书
佛光寺导游词
2015/02/10 职场文书
2015年项目工作总结
2015/04/29 职场文书