vue全局api之extend

全局api之extend

vue.extend(函数) 注意：括号中必须是函数
这在我们实际的开发中使用的比较少，这是因为和我们常用的vue.component相比extend更加繁琐。

官网解释extend是vue的构造器，床架一个子类。参数是一个包含组件选项的对象

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

// 创建构造器 var Profile = Vue.extend({ template: '

{{firstName}} {{lastName}} aka {{alias}}

', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount('#mount-point')

我们在views中创建文件夹extend，其中有hello的js和vue

hello.vue

{{text}}

hello.js

/* jshint esversion: 6 */

import Vue from ‘vue’;
import HelloTemplate from ‘…/extend/hello.vue’;

// 使用extend方法创建vue的子类
const HelloConstructor = Vue.extend(HelloTemplate);

// 使用这个方法调用hello组件

function Hello(options) {
options = options || {};
if (typeof options === ‘string’) {
options = {
text: options
};
}

// 实例化子组件，然后获取到DOM结构并挂载到body上
const helloInstence = new HelloConstructor({ data: options });
helloInstence.vm = helloInstence.$mount();
console.log(helloInstence.vm)
document.body.appendChild(helloInstence.vm.$el);

}
// 暴露接口
export default Hello;

在router\index.js中导入hello.vue文件

import Hello from ‘…/views/extend/hello.vue’
{
path: ‘/’,
name: ‘extend’,
component: Hello
}

在main.js中

import Hello from ‘./views/extend/hello’;

Hello(‘hello world’);