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 支持ie和firefox杰奇翻页函数
Jul 22 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
Angular之toDoList的实现代码示例
Dec 02 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
vue项目中mock.js的使用及基本用法
May 22 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
js实现小星星游戏
Mar 23 Javascript
js实现跳一跳小游戏
Jul 31 Javascript
vue3.0中setup使用(两种用法)
Dec 02 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
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP解决高并发的优化方案实例
2020/12/10 PHP
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
Webpack之tree-starking 解析
2018/09/11 Javascript
详解vue 命名视图
2019/08/14 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
python对html过滤处理的方法
2018/10/21 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
详解python的四种内置数据结构
2019/03/19 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
用Python制作mini翻译器的实现示例
2020/08/17 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
正风肃纪剖析材料
2014/02/18 职场文书
给老师的一封建议书
2014/03/13 职场文书
科学育儿宣传标语
2014/10/08 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
干部外出学习心得体会
2016/01/18 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB