vue.js周末

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

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

//正常加载
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导入组件，可以获取到组件

var name = 'system';
var myComponent =() => import('../components/' + name + '.vue');
var route={//前端全栈开发交流学习圈：866109386
  name:name,//帮助1-3年前端人员，提神技术思维
  component:myComponent
}

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

var name = 'system';
var route={//前端全栈开发交流学习圈：866109386
  name:name,//帮助1-3年前端人员，提神技术思维
  component :() => import('../components/' + name + '.vue');
}

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

var name = 'system';
var myComponent = resolve => require.ensure([], () => resolve(require('../components/' + name + '.vue')));
var route={//前端全栈开发交流学习圈：866109386
  name:name,//帮助1-3年前端人员，提神技术思维
  component:myComponent
}

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

var name = 'system';
var route={
  name:name,
  component(resolve) {
    require(['../components/' + name + '.vue'], resolve)
  }
}

1.什么是组件？
任何一个页面我们都可以看做成无数个组件的构成，但是组件只能有一个根元素，也就是说我们需要将一个大的div把它整个包起来，组件化的方式可以让很多代码进行复用，例如类似的表单注册一个组件后，只需要将组件名作为一个标签使用即可达到想用的效果。

 

2.组件中的data必须是函数
可以看出，注册组件时传入的配置和创建Vue实例差不多，但也有不同，其中一个就是data属性必须是一个函数。

这是因为如果像Vue实例那样，传入一个对象，由于JS中对象类型的变量实际上保存的是对象的引用，所以当存在多个这样的组件时，会共享数据，导致一个组件中数据的改变会引起其他组件数据的改变。

而使用一个返回对象的函数，每次使用组件都会创建一个新的对象，这样就不会出现共享数据的问题来了

 

3.组件挂载元素的局限性：
由于html标签本身就有很多的限制性，例如table标签放不了div，option只能放在select里面等,所以组件挂载元素的时候要注意使用i属性，他可以避免自定义组件在标签中的限制性

 

 

4.组件的分类：
(1)局部组件

在vue实例中使用实例属性components来进行注册，为局部组件，只能在该vue实例绑定的dom节点内使用.

（2）全局组件的注册

①使用vue提供的静态函数component注册