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()

最后更新时间: 3/25/2019, 4:08:34 PM