vue.extend#

使用基礎 Vue 構造器函式，通過原型繼承，(返回)建立一個“子類”(構造器)。引數是一個包含元件選項的物件。

Copyconst Sub = function VueComponent (options) { this._init(options)}Sub.prototype = Object.create(Super.prototype)Sub.prototype.constructor = Sub

vue.component#

註冊或獲取全域性元件。註冊還會自動使用給定的id設定元件的名稱。內部實質上呼叫了vue.extend,最後返回"子類"(構造器),這個子類構造器。

vue.component方法的定義中有如下程式碼：

Copy// 此處 this 是 Vue ； this.options._base也是Vue ；相當於Vue.extenddefinition = this.options._base.extend(definition)...return definition

綜合例子如下：

Copyvar Component1 = Vue.component('any',{ template:'<div>Component1</div>'}) var Component2 = Vue.extend({ template:'<div>Component2</div>'}) console.log(Component1);console.log(Component2);var App = Vue.extend({ components:{Component1,Component2}, data() { return { a: 12 } }, template: `<div> {{this.a}} <any/>  <Component1/>  <Component2/>  </div>`,})new Vue({ render(h){ return h(App) }}).$mount('#app')

通過components註冊了一個全域性any元件，可以在App中直接使用。Component1和Component2這兩個建構函式通過區域性註冊之後，也可以在App中使用components:{元件一，元件二}#

單檔案vue中經常會通過import引入其他元件，然後在本元件中註冊和使用，程式碼：

Copy<template>\t<Icon/></template><script>\t import Icon from './icon.vue' console.log(Icon) export default { components:{Icon} }</script>

列印Icon，發現Icon是一個物件，既可以是物件也可以是函式，Vue內部是如何處理的呢？

在vue內部建立虛擬dom的時候有如下的程式碼：

Copyif (isObject(Ctor)) { Ctor = baseCtor.extend(Ctor)}

此處的Ctor對應著上面的Icon，當判斷是物件的時候會呼叫extend方法，也就是vue.extend方法，返回一個子類建構函式，殊途同歸。

最後，咱給小編：