# Vue.extend() 和 Vue.component() 的区别
# Vue.extend( options )
使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象
也就是说,Vue.extend()
返回一个构造器,这个构造器集成子 Vue
构造器,同时预设了一些 options
,使用方法与 Vue
构造器相同
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')
# Vue.component( id, [definition] )
注册或获取全局组件。注册还会自动使用给定的id设置组件的名称
// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件,传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')
# 对比
从上面的代码可以看出,注册组件有两种方式:
- 传入一个扩展过的构造器:
Vue.component('my-component', Vue.extend({ /* ... */ }))
- 传入一个选项对象:
Vue.component('my-component', { /* ... */ })
Vue.extend()
只是创建一个构造器,注册组件还是需要调用 Vue.component()
传入选项对象注册组件时(Vue.component('my-component', options)
),Vue 内部还是会调用 Vue.extentd()
函数,Vue 会将 options
通过 Vue.extend
创建一个扩展过的构造器,然后再作为参数传递给 Vue.component()