vue.extend與vue.component

Vue.extend({}) 簡述:使用vue.extend返回一個子類構造函數,也就是預設部分選項的vue實例構造器。(說那麼多還是創建一個組件的意思,個人覺的有點類似於原生的createElement()的意思)
可以結合以下兩種方式實現一個組件

一.可以使用vue.component進行實例化

// 註冊組件,傳入一個擴展過的構造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 註冊組件,傳入一個選項對象 (自動調用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 獲取註冊的組件 (始終返回構造器)
var MyComponent = Vue.component('my-component')

二. 使用new extendName().$mount(’’+el)方式進行實例化(從而實現模擬組件)

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 創建並掛載到 #app (會替換 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者,在文檔之外渲染並且隨後掛載
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章