https://cn.vuejs.org/v2/guide/components.html

https://cn.vuejs.org/v2/guide/components-dynamic-async.html

上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现:

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中,currentTabComponent 可以包括

  • 已注册组件的名字,或
  • 一个组件的选项对象

你可以在这里查阅并体验完整的代码,或在这个版本了解绑定组件选项对象,而不是已注册组件名的示例。

到目前为止,关于动态组件你需要了解的大概就这些了,如果你阅读完本页内容并掌握了它的内容,我们会推荐你再回来把动态和异步组件读完。

什么是组件:

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。

下面一段简单的代码给大家介绍Vue加载组件的几种方式,具体代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
//正常加载
import index from '../pages/index.vue'
import view from '../pages/view.vue'
//懒加载
const index = resolve => require(['../pages/index.vue'], resolve)
const view = resolve => require(['../pages/view.vue'], resolve)
//懒加载 - 按组
const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'group-index')
const view = r => require.ensure([], () => r(require('../pages/view.vue')), 'group-view')
// 懒加载 - 按组 import,基于ES6 import的特性
const index = () => import('../pages/index.vue')
const view = () => import('../pages/view.vue')

补充:Vue动态加载组件的四种方式

动态加载组件的四种方式:

1、使用import导入组件,可以获取到组件

1
2
3
4
5
6
var name = 'system';
var myComponent =() => import('../components/' + name + '.vue');
var route={
  name:name,
  component:myComponent
}

2、使用import导入组件,直接将组件赋值给componet

1
2
3
4
5
var name = 'system';
var route={
  name:name,
  component :() => import('../components/' + name + '.vue');
}

3、使用require 导入组件,可以获取到组件

1
2
3
4
5
6
var name = 'system';
var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
var route={
  name:name,
  component:myComponent
}

4、使用require 导入组件,直接将组件赋值给componet

1
2
3
4
5
6
7
var name = 'system';
var route={
  name:name,
  component(resolve) {
    require(['../components/' + name + '.vue'], resolve)
  }
}

JavaScript 箭头函数(Lambda表达式)

 https://blog.csdn.net/cuit/article/details/53200335
 

简介

JavaScript 中,函数可以用箭头语法(”=>”)定义,有时候也叫“lambda表达式”。这种语法主要意图是定义轻量级的内联回调函数。例如:

// Arrow function:
[5, 8, 9].map(item => item + 1); // -> [6, 9, 10] // Classic function equivalent:
[5, 8, 9].map(function(item) {
return item + 1;
}); // -> [6, 9, 10]

当箭头函数有一个参数时,参数两边的括号是可有可无的,但是还是有括号看起来看清楚。

const foo = bar => bar + 1;
const bar = (baz) => baz + 1;
  • 1
  • 2

箭头函数不带参数时,必须要用括号,比如:

const foo = () => "foo";
  • 1

如果函数体不是只一行,应该用花括号,并显式地返回(如果需要返回值)。

const foo = bar => {
const baz = 5;
return bar + baz;
};
foo(1); // -> 6
  • 1
  • 2
  • 3
  • 4
  • 5

arguments object

箭头函数不会暴露 argument 对象,所以,argument 将简单地指向当前scope内的一个变量。

arguments object 是所有函数中的一个本地变量。你可以通过 arguments 对象引用函数的入参。这个对象包含传给这个函数的每个入参的入口,索引从0开始,例如: 
arguments[0] 
arguments[1] 
arguments[2]

const arguments = [true];
const foo = x => console.log(arguments[0]); foo(false); // -> true
  • 1
  • 2
  • 3
  • 4

基于此,箭头函数也不知道它的调用者。 
当缺少arguments object时,可能会有所限制(极少数情况),其余的参数一般可以做为替代。

const arguments = [true];
const foo = (...arguments) => console.log(arguments[0]); foo(false); // -> false
  • 1
  • 2
  • 3
  • 4

绑定this的值

箭头函数是 lexically scoped,这意味着其 this 绑定到了附近scope的上下文。也就是说,不管this指向什么,都可以用一个箭头函数保存。

看下面的例子, Cow 类有一个方法在1秒后输出sound。

class Cow {
constructor() {
this.sound = "moo";
}
makeSoundLater() {
setTimeout(() => {
console.log(this.sound);
}, 1000);
}
} var myCow = new Cow();
var yourCow = new Cow(); yourCow.sound = "moooooo"; myCow.makeSoundLater();
yourCow.makeSoundLater();

在 makeSoundLater() 方法中,this 指向当前 Cow 对象的实例。所以在这个例子中当我们调用 myCow.makeSoundLater(), this 指向 myCow。然后,通过使用箭头函数,我们保存了 this,这样我们就可以在需要时引用 this.sound 了。将会输出 “moo”,而不是yourCow.makeSoundLater()输出的“moooooo”。

隐式返回值

箭头函数可以通过省略掉小括号做到隐式返回值。

const foo = x => x + 1;
foo(1); // -> 2
  • 1
  • 2

当使用隐式返回时,Object Literal 必须用花括号括起来。

Object Literal 是用花括号括起来的,分号隔开的 k-v 对象列表。

const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}
  • 1
  • 2

显示返回值

const foo = x => {
return x + 1;
} foo(1); // -> 2
  • 1
  • 2
  • 3
  • 4
  • 5

语法


x => y // Implicit return x => { return y } // Explicit return (x, y, z) => { ... } // Multiple arguments (() => { ... })() // Immediately-invoked function expression

 

Vue加载组件、动态加载组件的几种方式的更多相关文章

  1. vue 实现tab切换动态加载不同的组件

    vue 实现tab切换动态加载不同的组件 使用vue中的is特性来加载不同的组件.具体看如下代码:这个功能对于vue比较复杂的页面可以使用上,可以把一个页面的功能拆分出来,使代码更简单.使用方式具体看 ...

  2. 动态库DLL加载方式-静态加载和动态加载

    静态加载: 如果你有a.dll和a.lib,两个文件都有的话可以用静态加载的方式: message函数的声明你应该知道吧,把它的声明和下面的语句写到一个头文件中 #pragma comment(lib ...

  3. JAVA反射机制--静态加载与动态加载

    Java反射是Java被视为动态(或准动态)语言的一个关键性质.这个机制允许程序在运行时透过Reflection APIs取得任何一个已知名称的class的内部信息,包括其modifiers(诸如pu ...

  4. 转载:Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式

    Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式 出自:http://www.cnblogs.com/top5/archive/2012/08/04/2623464.html 关 ...

  5. 于Unity3D动态创建对象和创建Prefab三种方式的原型对象

    于Unity3D动态创建对象和创建Prefab三种方式的原型对象 u3d在动态创建的对象,需要使用prefab 和创建时 MonoBehaviour.Instantiate( GameObject o ...

  6. EasyUI的treegrid组件动态加载数据问题的解决办法

    http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...

  7. React 性能优化之组件动态加载(react-loadable)

    React 项目打包时,如果不进行异步组件的处理,那么所有页面所需要的 js 都在同一文件中(bundle.js),整个js文件很大,从而导致首屏加载时间过长. 所有,可以对组件进行异步加载处理,通常 ...

  8. vue问题八:动态加载loading、浏览器图标

    全局动态加载loading: 参考文档:https://blog.csdn.net/qq_34825875/article/details/79570301 在main.js或者index.js引用  ...

  9. vue-router实现路由懒加载( 动态加载路由 )

    三种方式第一种:vue异步组件技术 ==== 异步加载,vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件.第二种:路由懒加载 ...

  10. 使用js加载器动态加载外部js、css文件

    let MiniSite = new Object(); /** * 判断浏览器 */ MiniSite.Browser = { ie: /msie/.test(window.navigator.us ...

随机推荐

  1. SpringMVC异常处理注解@ExceptionHandler@ControllerAdvice@ResponseStatus

    参考: http://blog.csdn.net/w372426096/article/details/78429132 http://blog.csdn.net/w372426096/article ...

  2. 练习|Django-单表

    结构目录 页面展示: 1创建Django,创建app01 在modules.py添加 class Book(models.Model): id=models.AutoField(primary_key ...

  3. 【LeetCode】158. Read N Characters Given Read4 II - Call multiple times

    Difficulty: Hard  More:[目录]LeetCode Java实现 Description Similar to Question [Read N Characters Given ...

  4. 计蒜客 无脑博士的试管们 【dfs】

    题目链接:https://nanti.jisuanke.com/t/31 题目大意: 无脑博士有三个容量分别是A,B,C 升的试管,A,B,C 分别是三个从 1 到20 的整数,最初,A 和 B 试管 ...

  5. hdu 5748 Bellovin【最长上升子序列】

    题目链接:https://vjudge.net/contest/148584#problem/A 题目大意: 解题思路:题目要求为:输出与已知序列的每一个元素的f(i)(f(i)的定义如题)相同的字典 ...

  6. java 同步 synchronized

    http://www.cnblogs.com/Qian123/p/5691705.html http://www.cnblogs.com/GnagWang/archive/2011/02/27/196 ...

  7. scikit-learn全局图

    https://scikit-learn.org/stable/tutorial/machine_learning_map/index.html

  8. BZOJ.4753.[JSOI2016]最佳团体(01分数规划 树形背包DP)

    题目链接 \(Description\) 每个点有费用si与价值pi,要求选一些带根的连通块,总大小为k,使得 \(\frac{∑pi}{∑si}\) 最大 \(Solution\) 01分数规划,然 ...

  9. Sphinx(coreseek)一些记录

    之前用Sphinx(coreseek)几次,相对正常 这次用到,记录些问题 1.coreseek好像没人维护了吗,有点可惜. 2.centOS7 编译和coreseek版本有点问题,需要修改编译文件 ...

  10. 潭州课堂25班:Ph201805201 WEB 之 CSS 第三课 (课堂笔记)

    在 CSS 中第个标签都可以认为是个盒子,盒子就有以下几层 边框 border border-top: 5px solid black; /*上边框 实线*/ border-right: 3px do ...