记由创建自定义组件实例需求驱动的vue.extend学习过程

学习vue.extend纯粹是因为当前项目使用的ui框架不能满足需求，所以使我萌生了自定义组件的念头。自定义组件写完后，又想能够自定义创建组件实例。这样一步一步，接触到了vue.extend。

First

首先要做的当然是先了解vue.extend的作用，通过官方文档API里的说明可以得知

vue.extend(option) 

• option的参数是一个包含组件选项的对象
• 返回一个Vue构造器。什么意思呢？看下面代码

[code]import AComponent from path; // 自定义的组件

// 第一种,option为自定义
// 此时baseExtend为构造函数
let baseExtend = vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
});

let baseInstance = new baseExtend(); // 创建组件实例

baseInstance.$mount('#mount-point');// 将实例挂载到id位mount-point的元素上

// 第二种,option为导入的组件对象
// 此时baseExtendTwo为AComponent组件的构造函数
let baseExtendTwo = vue.extend(AComponent);

let baseInstanceTwo = new baseExtendTwo(); // 创建AComponent组件实例

baseInstanceTwo.$mount('#mount-point');// 将实例挂载到id位mount-point的元素上

看到这里，对vue.extend()的基本用法有了一个了解了，但是上述代码实现中与我想要动态生成一个自定义组件实例不同。官方文档中是事先定义一个id为“mount-point”的元素，然后挂载上去。没有举例如何动态生成一个元素并挂载。所以下一步，我的目标是查看如果将组件实例挂载到动态生成的元素上。

Second

我先去查看了$mount的用法，果不其然有办法。

$mount()中不传参数，将实例渲染为文档之外的元素。渲染为文档之外的元素就相当于createElement了，但是还需要将元素插入到文档中，因此可以将之前的代码修改下。

[code]import AComponent from path; // 自定义的组件

// 第一种,option为自定义
// 此时baseExtend为构造函数
let baseExtend = vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
});

let baseInstance = new baseExtend(); // 创建组件实例

baseInstance.$mount();// 将实例挂载到id位mount-point的元素上

document.body.appenChild(baseInstance.$el); // 将实例元素插入body最后

// 第二种,option为导入的组件对象
// 此时baseExtendTwo为AComponent组件的构造函数
let baseExtendTwo = vue.extend(AComponent);

let baseInstanceTwo = new baseExtendTwo(); // 创建AComponent组件实例

baseInstanceTwo.$mount();// 将实例挂载到id位mount-point的元素上

document.body.appenChild(baseInstanceTwo.$el); // 将实例元素插入body最后

到这里，自定义组件实例的创建完成了，需求驱动着我的进步。

Summry

1. 与使用标签使用组件不同,使用vue.extend与$mount()方法可以动态创建组件。
2. 使用$mount()挂载实例时，要记得最后将实例的元素插入至文档中。