笔记

Vue.component 注册全局组件:

JS Bin on jsbin.com

其实内部调用了 Vue.extend

JS Bin on jsbin.com

Vue.component 作用是告诉 Vue 在处理 template 时,将 <test-component></test-component> 替换为相应的组件。

Vue.extend 却不能,因为生成的对象没有名字,得这样:

JS Bin on jsbin.com

Vue.component 也可以通过组件的 components 属性使用其他组件。

JS Bin on jsbin.com

对于 Vue.componentVue.extend 返回的都是 组件的构造器(constructor),而且这些构造器是 Vue 构造器 的子类。 这也意味着,这些构造器的实例将会继承了 Vue 实例的属性和方法,比如 $mount

利用 $mount 方法,可以将组件实例 mount 在某一节点上或者触发组件接下来的生命周期,利用这个方式可以比较方便的编写组件的单元测试。

JS Bin on jsbin.com

测试 Demo:

import Button from 'components/Button'

describe('button', () => {
  it('should init correctly', () => {
    const vm = Vue.extend(Button).$mount('#app');
    expect(vm.$el.querySelector('button').to.exist);
  });
});

之所以 Vue.extend(Button) ,是因为 import ButtonObjectButton 组件的 options, 需要 Vue.extend 去创建 Button constructor。 如果导入的是 Button constructor,那么就不需要 Vue.extend 了。

以上。

参考